Forums

Posting in these forums is disabled. These forums will be available for archive purposes. Please join the new forums at the links below:

  • yui-support - replaces the `YUI 3.x` and `YUI 3 Gallery` forums.
    We have created the following discussion categories within this group to aid discoverability for these most-used topics:
    • Charts for YUI Charts support.
    • DataTable for YUI DataTable support.
    • Gallery for YUI Gallery support, including support for published Gallery components as well as the Gallery process in general.
    • Tools for support of YUI’s suite of developer tools such as selleck, shifter, grover, yogi, etc.
    • Everything Else for questions that don’t fit one of the categories above, we’ve got you covered here.
  • yui-deprecated - replaces the `YUI 2.x` forum and the forums of other deprecated products (`YUI Doc`, `Builder`, `YUI PHP Loader`, etc.).
  [ 11 posts ] Go to page 1, 2 Next
New Topic | Post Reply | Print view
Previous topic | Next topic

Leonardo Takano

  • Username: DkLeon
  • Joined: Mon May 31, 2010 4:35 am
  • Posts: 7
  • IRC: Dark_Leon
  • Offline
  • Profile
Tags:
  • datasource
  • datatable
  • number
  • paginator

Dynamic DataTable

Post Posted: Mon May 31, 2010 5:07 am
+0-
Hi for everyone.

First time being here and first time implementing yui objects.

I have a doubt:

I am creating one datatable (with pagination) where my datasource is build by an object that is generated by an SQL select statement. But as far as I know, if my database table growns too fast, the select statement is longer and could give me a timeout.

Is there any chance that I could use something like this:

1. My datasource is generate but with a limited number of rows returned by SQL select statement (that is possible using some parameters that I use on my statement).
2. My dataconfig of the datatable tells me the number of records that the paginator uses to count the number of pages (ex: my datasource return 20 rows but the total is 100, so the paginator could generate 5 links).
3. Everytime that the user changes the paginator index, the SQL Statement is executed for the next block of data.

Example:

I have a table with 200 rows.
I want a datatable that shows 20 rows per page but I don't want the datasource to retrieve all the data.
The paginator must recognize that we have 10 pages.
When the user changes the page index of the datatable, the datasource is updated with the 20 rows of that index.

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2017
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile

Re: Dynamic DataTable

Post Posted: Mon May 31, 2010 9:17 am
+0-
That is called "server-side pagination and sorting", that is the name you will find in the list of examples. You are asking for pagination but when doing it on the server side, it requires sorting to be handled on that side as well.

In some browsers, calculating the layout of the page takes a very long time and it may be several times the data retrieval at the server and its transmission to the client. Check out where your time is being spend, your server-side delays might not be the issue.

Leonardo Takano

  • Username: DkLeon
  • Joined: Mon May 31, 2010 4:35 am
  • Posts: 7
  • IRC: Dark_Leon
  • Offline
  • Profile
Tags:
  • datasource
  • datatable
  • examples
  • number

Re: Dynamic DataTable

Post Posted: Mon May 31, 2010 10:07 am
+0-
Okay, thanks Satyam.

I am looking on those examples and I could sucessfully create a DataTable with some data provided by the SQL statement.

I understand about the transmission between server and client sides.

After checking the transmission I received the following results:


1. DataSource retrieves in about 2 sec 2660 lines of data
2. DataTable is build in about 0.5 sec
That gives me about 2.5 to 3 sec to build the DataTable.

But if I could use the DataTable like I said is 10x faster to build the DataTable.

My doubt is: the datasource is the one that generates the number of pagination of datatable or can I someway overrides the method that generate the pagination and show only the data of the pagination index and populate the pagination myself?

Thanks in advance!

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2017
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile
Tags:
  • attribute
  • datatable
  • number
  • paginator

Re: Dynamic DataTable

Post Posted: Mon May 31, 2010 10:34 am
+0-
The links to the pages are generated by the Paginator component based on two pieces of data you give it. One is the rows per page configuration attribute that you provide when you create the Paginator instance. The other is the total number of pages that you get from the server as 'meta-data' and that you can extract in the handleDataReturnPayload. Usually, this comes from a plain Select count(*) SQL statement done prior to the actual query. If you don't know how many, Paginator provides the YAHOO.widget.Paginator.VALUE_UNLIMITED constant to leave it open.

http://developer.yahoo.com/yui/docs/YAH ... _UNLIMITED

Leonardo Takano

  • Username: DkLeon
  • Joined: Mon May 31, 2010 4:35 am
  • Posts: 7
  • IRC: Dark_Leon
  • Offline
  • Profile

Re: Dynamic DataTable

Post Posted: Mon May 31, 2010 11:01 am
+0-
Thanks for the quick reply.

But as I was searching for, the number of pagination is generated depending on the parameters you said and, in my opinion, on the number of data provided by the DataSource.

Example: if my datasource provides 100 values for the paginator and the rowsperpage parameter is 25, the paginator gives me 4 links.

What I want is: my datasource will provide 25 values and the paginator rowsperpage parameter is 25, it will give me 1 page link BUT my totalrecords for the datasource is 100 or more, so the paginator must recognizes that number and show me 4 or more page links and the datasource values will be generated accordilly to the page index of the paginator.

As far as I understand from the tool, that cannot be done if the datasource don't provide the full values (that will be 100 or more)..

Leonardo Takano

  • Username: DkLeon
  • Joined: Mon May 31, 2010 4:35 am
  • Posts: 7
  • IRC: Dark_Leon
  • Offline
  • Profile
Tags:
  • datasource
  • datatable
  • number
  • paginator
  • widget

Re: Dynamic DataTable

Post Posted: Mon May 31, 2010 11:16 am
+0-
To keep easy for you to undestand, this is my code for the page?

"
YAHOO.ServerPagination = new function() {
//Columns
var ColumnsDef = [
{ key: "timestamp", label: "Timestamp" },
{ key: "status", label: "Status" },
{ key: "title", label: "Title" },
{ key: "objectname", label: "Objectname" },
{ key: "callingname", label: "Callingname" }
];

this.WebSupervisor = new JsonService("WebSupervisor.ashx");
this.MO = "Three Phase Transformer 01";

//DataSoruce
var ValSource = new YAHOO.util.DataSource("mySQLStatement (that will return 25 rows)");
ValSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
ValSource.responseSchema = {
maxCacheEntries: 10,
resultsList: "eventList", //the list of data that will be populated on the datatable
totalRecords: "MaxRows", //the total number of data that exists on the table
pageSize: 10,
fields: ["timestamp", "status", "title", "objectname", "callingname"]
};

//Request generate data
var CustomRequest = function(oState, oSelf) {
oState = oState || { pagination: null, sortedBy: null };
var startIndex = (oState.pagination) ? oState.pagination.recordOffset : 0;
};

//Table configuration
var DataConfig = {
generateRequest: CustomRequest,
paginator: new YAHOO.widget.Paginator({
pageLinks: 10,
rowsPerPage: 20
})
}

//DataTable
var EventTable = new YAHOO.widget.DataTable("EventsTable", ColumnsDef, ValSource, DataConfig);

//Pagination handle data
EventTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
oPayload.totalRecords = oResponse.meta.totalRecords;
return oPayload;
}
}
"

Is something missing to do what I want?

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2017
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile

Re: Dynamic DataTable

Post Posted: Mon May 31, 2010 11:44 am
+0-
I wouldn't know. Does the JSON data return a property called totalRecords? I don't see you pointing to the meta information in your responseSchema. If you don't send the information, Paginator will never know

Leonardo Takano

  • Username: DkLeon
  • Joined: Mon May 31, 2010 4:35 am
  • Posts: 7
  • IRC: Dark_Leon
  • Offline
  • Profile
Tags:
  • datatable
  • json
  • number

Re: Dynamic DataTable

Post Posted: Mon May 31, 2010 11:57 am
+0-
My data is a new class that I created that will generated an array used by the JSArray:

the metadata generated by the json data is:
eventList: list of all data that will populate the DataTable
MaxRows: the total number of rows in the specific table that I run my sql statement ("select count(*) from mytable")

then I repass those values to the responseSchema like the example show me:
myDataSource.responseSchema = {
resultsList: "eventList",
fields: ["timestamp", "status", "title", "objectname", "callingname"],
metaFields: {totalRecords: "MaxRows" }
}

using that and the handleDataReturnPayload should be the necessary to make the DataTable works like I wanted, rightt?

the eventList is returnin a list of 20 events and MaxRows a string "2947" which is the total number of rows in the table according to the select statement.

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2017
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile

Re: Dynamic DataTable

Post Posted: Mon May 31, 2010 12:44 pm
+0-
Neither the DataSource nor I care how you generate the JSON data on the server or where it comes from. Each server environment will do it in a different way and it is really irrelevant. What the DataSource deals with is the JSON data. What is the JSON data? Does it validate with JSONLint (jsonlint.org). Read the example and make sure the meta information exists and can be located by the DataSource as explained in the example. It is late in Europe so I'm going off-line. Just follow the example and make sure you are providing the meta data where the DataSource can locate it. Use a debugger and put a breakpoint in the handleDataReturnPayload function.

Leonardo Takano

  • Username: DkLeon
  • Joined: Mon May 31, 2010 4:35 am
  • Posts: 7
  • IRC: Dark_Leon
  • Offline
  • Profile
Tags:
  • datatable
  • number
  • paginator

Re: Dynamic DataTable

Post Posted: Tue Jun 01, 2010 4:34 am
+0-
Well, Satyam. It's not like my DataTable is not working, what I want to know if there is any possibility that I can make the Paginator works a little different from the default.

My JSONData is valid in JSONLint.

As far as I have tested so far is that I cannot control the way the paginator counts the total number of page links like an asp.net gridview does (I don't want to compare the tools).

It's just that, what I am searching now if there anyway of creating a custom paginator control to do that!

Thanks for all your responses, you show me a lot of things that I could do with YUI.
  [ 11 posts ] Go to page 1, 2 Next
New Topic | Post Reply | Print view
Previous topic | Next topic
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum