Yahoo! Developer Network Home - Help

YUI Library Examples: DataTable Control (beta): Server-side Pagination

DataTable Control (beta): Server-side Pagination

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...

Markup for this Example

1<div id="demo"
2    <div id="paging"></div> 
3    <div id="dt"></div> 
4</div> 
view plain | print | ?

Data

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 | ?

JavaScript

Set up the DataSource

  • 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.
  • A custom function is created to translate JavaScript paging requests into something useful to the server.
1// Set up the DataSource 
2var mySource = new YAHOO.util.DataSource('assets/php/json_proxy.php?'); 
3mySource.responseType   = YAHOO.util.DataSource.TYPE_JSON; 
4mySource.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 
18var buildQueryString = function (state,dt) { 
19    return "startIndex=" + state.pagination.recordOffset + 
20           "&results=" + state.pagination.rowsPerPage; 
21}; 
view plain | print | ?

Create a Paginator

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.   
2var 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 | ?

Hooking everything together in the DataTable config

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.
1var myTableConfig = { 
2    initialRequest         : 'startIndex=0&results=25'
3    generateRequest        : buildQueryString, 
4    paginator              : myPaginator, 
5    paginationEventHandler : DataTable.handleDataSourcePagination 
6}; 
view plain | print | ?

Voila, Server side paginated DataTable!

Finally, instantiate the DataTable with the DataSource and configuration.

1// The columns to show in this table. 
2var myColumnDefs = [ 
3    {key:"id"}, 
4    {key:"date"}, 
5    {key:"price"}, 
6    {key:"age"}, 
7    {key:"desc"
8]; 
9 
10var myTable = new YAHOO.widget.DataTable('dt'
11                    myColumnDefs, mySource, myTableConfig); 
view plain | print | ?

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings