DataTable Widget :: Paginated Over XHR

Sample Code

CSS:

/* custom css*/ #paginated {margin:1em;} #paginated table {border-collapse:collapse;} #paginated th, #paginated td {border:1px solid #000;} #paginated th {background-color:#696969;color:#fff;}/*dark gray*/ #paginated .yui-dt-odd {background-color:#eee;} /*light gray*/

Markup:

<div id="paginated"></div>

JavaScript:

var myColumnHeaders = [ {key:"extid",text:"ID"}, {key:"name",text:"Name"}, {key:"date",text:"Date"}, {key:"price",text:"Price"}, {key:"number",text:"Number"}, {key:"address",text:"Address"}, {key:"company",text:"Company"}, {key:"desc",text:"Description"}, {key:"age",text:"Age"}, {key:"title",text:"Title"}, {key:"phone",text:"Phone"}, {key:"email",text:"Email"}, {key:"zip",text:"Zip"}, {key:"country",text:"Country"} ]; var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders); // Show over 1000 records var myDataSource = new YAHOO.util.DataSource("./php/data_proxy.php"); // Show 5000 records -- FireBug must be disabled! //var myDataSource = new YAHOO.util.DataSource("./php/data5000_proxy.php"); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; myDataSource.responseSchema = { resultsList: "result", fields: ["extid","name","date","price","number","address","company","desc","age","title","phone","email","zip","country"] }; var initialRequest = "get=all&output=json"; var oConfigs = { caption:"Example: Paginated Over XHR", initialRequest:initialRequest, pageCurrent: 1, rowsPerPage: 100, startRecordIndex: 1, pageLinksLength: 10, rowsPerPageDropdown: [25,50,100,500] }; var myDataTable = new YAHOO.widget.DataTable("paginated", myColumnSet, myDataSource, oConfigs);