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:

{"recordsReturned":25, "totalRecords":1397, "startIndex":0, "sort":null, "dir":"asc", "pageSize":10, "records":[ {"id":"0", "name":"xmlqoyzgmykrphvyiz", "date":"13-Sep-2002", "price":"8370", "number":"8056", "address":"qdfbc", "company":"taufrid", "desc":"pppzhfhcdqcvbirw", "age":"5512", "title":"zticbcd", "phone":"hvdkltabshgakjqmfrvxo", "email":"eodnqepua", "zip":"eodnqepua", "country":"pdibxicpqipbsgnxyjumsza"}, ... ] }

CSS

/* No custom CSS. */

The markup

<p>Total records (between 0 and 1000): <input type="text" id="total" value="1000"> <input type="button" id="update" value="Update"></p> <div id="dynamicdata"></div>

Javascript

YAHOO.example.DynamicData = function() { // Column definitions var myColumnDefs = [ // sortable:true enables sorting {key:"id", label:"ID", sortable:true}, {key:"name", label:"Name", sortable:true}, {key:"date", label:"Date", sortable:true, formatter:"date"}, {key:"price", label:"Price", sortable:true}, {key:"number", label:"Number", sortable:true} ]; // Custom parser var timestampToDate = function(oData) { // timestamp comes from server in seconds // JS needs it in milliseconds return new Date(oData*1000); }; // DataSource instance var myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?"); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; myDataSource.responseSchema = { resultsList: "records", fields: [ {key:"id", parser:"number"}, {key:"name"}, {key:"date", parser:timestampToDate}, {key:"price",parser:"number"}, {key:"number",parser:"number"} ], // Access to values in the server response metaFields: { totalRecords: "totalRecords", startIndex: "startIndex" } }; // Customize request sent to server to be able to set total # of records var generateRequest = function(oState, oSelf) { // Get states or use defaults oState = oState || { pagination: null, sortedBy: null }; var sort = (oState.sortedBy) ? oState.sortedBy.key : "id"; var dir = (oState.sortedBy && oState.sortedBy.dir === YAHOO.widget.DataTable.CLASS_DESC) ? "desc" : "asc"; var startIndex = (oState.pagination) ? oState.pagination.recordOffset : 0; var results = (oState.pagination) ? oState.pagination.rowsPerPage : 25; var total = YAHOO.util.Dom.get("total").value *1; // Validate input if(!YAHOO.lang.isNumber(total) || total < 0 || total > 1000) { YAHOO.util.Dom.get("total").value = 0; total = 0; alert("Total must be between 0 and 1000."); } // Build custom request return "sort=" + sort + "&dir=" + dir + "&startIndex=" + startIndex + "&results=" + (startIndex + results) + "&total=" + total; }; // DataTable configuration var myConfigs = { generateRequest: generateRequest, initialRequest: generateRequest(), // Initial request for first page of data dynamicData: true, // Enables dynamic server-driven data sortedBy : {key:"id", dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow paginator: new YAHOO.widget.Paginator({ rowsPerPage:25 }) // Enables pagination }; // DataTable instance var myDataTable = new YAHOO.widget.DataTable("dynamicdata", myColumnDefs, myDataSource, myConfigs); // Update totalRecords on the fly with values from server myDataTable.doBeforeLoadData = function(oRequest, oResponse, oPayload) { oPayload.totalRecords = oResponse.meta.totalRecords; oPayload.pagination.recordOffset = oResponse.meta.startIndex; return oPayload; }; return { ds: myDataSource, dt: myDataTable }; }();

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.