This example enables server-side sorting and pagination for data that is dynamic in nature.
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 | ? |
1 | /* No custom CSS. */ |
view plain | print | ? |
1 | <div id="dynamicdata"></div> |
view plain | print | ? |
1 | YAHOO.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 | ? |
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.
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.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings