YUI Library Home

YUI Library Examples: DataTable Control: Server-side Pagination and Sorting for Dynamic Data

DataTable Control: Server-side Pagination and Sorting for Dynamic Data

This example enables server-side sorting and pagination for data that is dynamic in nature.

Code for this example

This example requests fresh data from the DataSource for every change to the DataTable's sorting or pagination states.

The server-side script delivering the DataTable's records will send the data in the following JSON format:

1{"recordsReturned":25, 
2    "totalRecords":1397, 
3    "startIndex":0, 
4    "sort":null, 
5    "dir":"asc", 
6    "pageSize":10, 
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 | ?

CSS

1/* No custom CSS. */ 
view plain | print | ?

The markup

1<div id="dynamicdata"></div> 
view plain | print | ?

Javascript

1YAHOO.example.DynamicData = function() { 
2    // Column definitions 
3    var myColumnDefs = [ // sortable:true enables sorting 
4        {key:"id", label:"ID", sortable:true}, 
5        {key:"name", label:"Name", sortable:true}, 
6        {key:"date", label:"Date", sortable:true, formatter:"date"}, 
7        {key:"price", label:"Price", sortable:true}, 
8        {key:"number", label:"Number", sortable:true
9    ]; 
10 
11    // Custom parser 
12    var stringToDate = function(sData) { 
13        var array = sData.split("-"); 
14        return new Date(array[1] + " " + array[0] + ", " + array[2]); 
15    }; 
16     
17    // DataSource instance 
18    var myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?"); 
19    myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
20    myDataSource.responseSchema = { 
21        resultsList: "records"
22        fields: [ 
23            {key:"id", parser:"number"}, 
24            {key:"name"}, 
25            {key:"date", parser:stringToDate}, 
26            {key:"price",parser:"number"}, 
27            {key:"number",parser:"number"
28        ], 
29        metaFields: { 
30            totalRecords: "totalRecords" // Access to value in the server response 
31        } 
32    }; 
33     
34    // DataTable configuration 
35    var myConfigs = { 
36        initialRequest: "sort=id&dir=asc&startIndex=0&results=25"// Initial request for first page of data 
37        dynamicData: true// Enables dynamic server-driven data 
38        sortedBy : {key:"id", dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow 
39        paginator: new YAHOO.widget.Paginator({ rowsPerPage:25 }) // Enables pagination  
40    }; 
41     
42    // DataTable instance 
43    var myDataTable = new YAHOO.widget.DataTable("dynamicdata", myColumnDefs, myDataSource, myConfigs); 
44    // Update totalRecords on the fly with value from server 
45    myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) { 
46        oPayload.totalRecords = oResponse.meta.totalRecords; 
47        return oPayload; 
48    } 
49     
50    return { 
51        ds: myDataSource, 
52        dt: myDataTable 
53    }; 
54         
55}(); 
view plain | print | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Logger Console

INFO 191ms (+1) 1:20:07 PM:

DataSource instance0

Making connection to live data for "sort=id&dir=asc&startIndex=0&results=25"

INFO 190ms (+0) 1:20:07 PM:

DataTable instance yui-dt0

DataTable showing message: Loading...

WARN 190ms (+0) 1:20:07 PM:

DataTable instance yui-dt0

Could not find DragDrop for resizeable Columns

INFO 190ms (+3) 1:20:07 PM:

DataTable instance yui-dt0

TH cells for 5 keys created

INFO 187ms (+0) 1:20:07 PM:

RecordSet instance yui-rs0

RecordSet initialized

INFO 187ms (+2) 1:20:07 PM:

ColumnSet instance yui-cs0

ColumnSet initialized

INFO 185ms (+184) 1:20:07 PM:

DataSource instance0

DataSource initialized

INFO 1ms (+1) 1:20:06 PM:

global

Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More DataTable Control Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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