This example illustrates how to configure a DataTable instance to page through a large data set managed on the server.
id | date | price | age | desc |
---|
id | date | price | age | desc |
---|---|---|---|---|
Loading data... |
1 | <div id="demo"> |
2 | <div id="paging"></div> |
3 | <div id="dt"></div> |
4 | </div> |
view plain | print | ? |
The DataSource will deliver JSON data in the following format:
1 | { |
2 | "recordsReturned":25, |
3 | "totalRecords":1397, |
4 | "startIndex":0, |
5 | "sort":null, |
6 | "dir":"asc", |
7 | "records":[ |
8 | {"id":"0", |
9 | "name":"xmlqoyzgmykrphvyiz", |
10 | "date":"13-Sep-2002", |
11 | "price":"8370", |
12 | "number":"8056", |
13 | "address":"qdfbc", |
14 | "company":"taufrid", |
15 | "desc":"pppzhfhcdqcvbirw", |
16 | "age":"5512", |
17 | "title":"zticbcd", |
18 | "phone":"hvdkltabshgakjqmfrvxo", |
19 | "email":"eodnqepua", |
20 | "zip":"eodnqepua", |
21 | "country":"pdibxicpqipbsgnxyjumsza"}, |
22 | ... |
23 | ] |
24 | } |
view plain | print | ? |
responseSchema.resultsList
is set to the location in the JSON response of the key holding the list of records for the current page.responseSchema.metaFields
is used to identify the location of the key in the parsed JSON response containing the totalRecords
for the Paginator.1 | // Set up the DataSource |
2 | var mySource = new YAHOO.util.DataSource('assets/php/json_proxy.php?'); |
3 | mySource.responseType = YAHOO.util.DataSource.TYPE_JSON; |
4 | mySource.responseSchema = { |
5 | resultsList : 'records', |
6 | fields : [ |
7 | 'id','name','date','price','number','address','company', |
8 | 'desc','age','title','phone','email','zip','country'], |
9 | metaFields : { |
10 | totalRecords: 'totalRecords', // The totalRecords meta field is |
11 | // a "magic" meta, and will be passed |
12 | // to the Paginator. |
13 | } |
14 | }; |
15 | |
16 | // A custom function to translate the js paging request into a query |
17 | // string sent to the XHR DataSource |
18 | var buildQueryString = function (state,dt) { |
19 | return "startIndex=" + state.pagination.recordOffset + |
20 | "&results=" + state.pagination.rowsPerPage; |
21 | }; |
view plain | print | ? |
For this example, we use a single container rather than allow DataTable to assign its default pagination containers. A custom layout for the pagination controls is used, set in the template
attribute.
Note: the rowsPerPage
configuration is required for all Paginator instances.
1 | // Set up the Paginator instance. |
2 | var myPaginator = new YAHOO.widget.Paginator({ |
3 | containers : ['paging'], |
4 | pageLinks : 5, |
5 | rowsPerPage : 15, |
6 | rowsPerPageOptions : [15,30,60], |
7 | template : "<strong>{CurrentPageReport}</strong> {PreviousPageLink} {PageLinks} {NextPageLink} {RowsPerPageDropdown}" |
8 | }); |
view plain | print | ? |
Here's the interesting part.
initialRequest
needs to target data that will populate at least the data on the page specified in the Paginator's initialPage
configuration (1 by default).generateRequest
is set to our custom function.paginator
is assigned the Paginator instance.paginationEventHandler
is set to DataTable's default DataSource relay, handleDataSourcePagination
. If more intricate DataSource interaction is needed, assign a custom function.1 | var myTableConfig = { |
2 | initialRequest : 'startIndex=0&results=25', |
3 | generateRequest : buildQueryString, |
4 | paginator : myPaginator, |
5 | paginationEventHandler : DataTable.handleDataSourcePagination |
6 | }; |
view plain | print | ? |
Finally, instantiate the DataTable with the DataSource and configuration.
1 | // The columns to show in this table. |
2 | var myColumnDefs = [ |
3 | {key:"id"}, |
4 | {key:"date"}, |
5 | {key:"price"}, |
6 | {key:"age"}, |
7 | {key:"desc"} |
8 | ]; |
9 | |
10 | var myTable = new YAHOO.widget.DataTable('dt', |
11 | myColumnDefs, mySource, myTableConfig); |
view plain | print | ? |
Note: Logging and debugging is currently turned off for this example.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings