DataTable Control: Client-side Pagination

This example retrieves a large data set in JSON format from a server script, then loads the data into a DataTable with client side pagination enabled.

View example in new window.

ID	Name	Date	Price	Number
Loading...

Sample Code for this Example

Data:


1	{"recordsReturned":504,
2	"totalRecords":1397,
3	"startIndex":0,
4	"sort":null,
5	"dir":"asc",
6	"records":[
7	{"id":"0",
8	"name":"xmlqoyzgmykrphvyiz",
9	"date":"13-Sep-2002",
10	"price":"8370",
11	"number":"8056",
12	"address":"qdfbc",
13	"company":"taufrid",
14	"desc":"pppzhfhcdqcvbirw",
15	"age":"5512",
16	"title":"zticbcd",
17	"phone":"hvdkltabshgakjqmfrvxo",
18	"email":"eodnqepua",
19	"zip":"eodnqepua",
20	"country":"pdibxicpqipbsgnxyjumsza"},
21	...
22	]
23	}
	view plain \| print \| ?

CSS:


1	#paginated {
2	text-align: center;
3	}
4	#paginated table {
5	margin-left:auto; margin-right:auto;
6	}
7	#paginated, #paginated .yui-dt-loading {
8	text-align: center; background-color: transparent;
9	}
	view plain \| print \| ?

Markup:


1	<div id="paginated"></div>
	view plain \| print \| ?

JavaScript:


1	YAHOO.util.Event.addListener(window, "load", function() {
2	YAHOO.example.ClientPagination = function() {
3	var myColumnDefs = [
4	{key:"id", label:"ID"},
5	{key:"name", label:"Name"},
6	{key:"date", label:"Date"},
7	{key:"price", label:"Price"},
8	{key:"number", label:"Number"}
9	];
10
11	var myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?");
12	myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
13	myDataSource.responseSchema = {
14	resultsList: "records",
15	fields: ["id","name","date","price","number"]
16	};
17
18	var oConfigs = {
19	paginator: new YAHOO.widget.Paginator({
20	rowsPerPage: 15
21	}),
22	initialRequest: "results=504"
23	};
24	var myDataTable = new YAHOO.widget.DataTable("paginated", myColumnDefs,
25	myDataSource, oConfigs);
26
27	return {
28	oDS: myDataSource,
29	oDT: myDataTable
30	};
31	}();
32	});
	view plain \| print \| ?

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.ClientPagination = function() {
        var myColumnDefs = [
            {key:"id", label:"ID"},
            {key:"name", label:"Name"},
            {key:"date", label:"Date"},
            {key:"price", label:"Price"},
            {key:"number", label:"Number"}
        ];

var myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?");
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        myDataSource.responseSchema = {
            resultsList: "records",
            fields: ["id","name","date","price","number"]
        };

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.

YUI Library Examples: DataTable Control: Client-side Pagination

Sample Code for this Example

Configuration for This Example

YUI Logger Output:

Logger Console

DataTable Control Examples:

More DataTable Control Resources: