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 }; }();