YUI Library Examples: DataTable Control (beta): Client-side Pagination

DataTable Control (beta): 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

ID	Name	Date	Price	Number
Loading data...

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 .yui-pg-container a {
8	color: #00d;
9	}
10	#paginated .yui-pg-pages a {
11	text-decoration: underline;
12	}
13	#paginated, #paginated .yui-dt-loading {
14	text-align: center; background-color: transparent;
15	}
	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 = new 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	this.myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?");
12	this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
13
14	// When responseSchema.totalRecords is not indicated, the records
15	// returned from the DataSource are assumed to represent the entire set
16	this.myDataSource.responseSchema = {
17	resultsList: "records",
18	fields: ["id","name","date","price","number"]
19	};
20
21	// The Paginator instance will have its totalRecords configuration
22	// populated by the DataTable when it receives the records from the
23	// DataSource
24	var oConfigs = {
25	paginator: new YAHOO.widget.Paginator({
26	rowsPerPage: 15
27	}),
28
29	// Show over 500 records
30	initialRequest: "results=504"
31	};
32
33	this.myDataTable = new YAHOO.widget.DataTable("paginated", myColumnDefs,
34	this.myDataSource, oConfigs);
35	};
36	});
	view plain \| print \| ?

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

this.myDataSource = new YAHOO.util.DataSource("assets/php/json_proxy.php?");
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;

// When responseSchema.totalRecords is not indicated, the records
        // returned from the DataSource are assumed to represent the entire set
        this.myDataSource.responseSchema = {
            resultsList: "records",
            fields: ["id","name","date","price","number"]
        };

// The Paginator instance will have its totalRecords configuration
        // populated by the DataTable when it receives the records from the
        // DataSource
        var oConfigs = {
                paginator: new YAHOO.widget.Paginator({
                    rowsPerPage: 15
                }),

// Show over 500 records
                initialRequest: "results=504"
        };

this.myDataTable = new YAHOO.widget.DataTable("paginated", myColumnDefs,
                this.myDataSource, oConfigs);
    };
});

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

YUI Library Examples: DataTable Control (beta): Client-side Pagination

Sample Code for this Example

YUI Logger Output:

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: