YUI Library Home

YUI Library Examples: DataTable Control: Client-side Pagination

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:

1YAHOO.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 | ?

YUI Logger Output:

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

Reload with logging
and debugging enabled.

More DataTable Control Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings