Example: DataTable - Client-side Pagination of Large RecordSet (YUI Library)

# DataTable Widget :: Client-side Pagination of Large RecordSet

### Sample Code

Data:

{"recordsReturned":null, "totalRecords":"1396", "startIndex":0, "records":[ {"extid":"702", "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"}, ... {"extid":"2047", "name":"sqrvpfpibtavxbpjba", "date":"22-Jun-2004", "price":"864", "number":"4418", "address":"cshyemrwdirsohapbal", "company":"cbidbvynxjgabozgarcdzuwo", "desc":"wd", "age":"1422", "title":"pbzqkdrfbfdlmenadtauweu", "phone":"aitxmxvbzusjykpap", "email":"lbxzcbsdwphrgiaagnx", "zip":"lbxzcbsdwphrgiaagnx", "country":"p"} ]}

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/json_proxy.php"); // Show 5000 records -- FireBug must be disabled! //var myDataSource = new YAHOO.util.DataSource("./php/json5000_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 oConfigs = { caption:"Example: Client-side Pagination of Large RecordSet", paginator:true, paginatorOptions:{ rowsPerPage: 100, dropdownOptions: [25,50,100,500] } }; var myDataTable = new YAHOO.widget.DataTable("paginated", myColumnSet, myDataSource, oConfigs);