Yahoo! Developer Network Home - Help

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.

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-aligncenter
3} 
4#paginated table { 
5    margin-left:automargin-right:auto
6} 
7#paginated .yui-pg-container a { 
8    color: #00d; 
9} 
10#paginated .yui-pg-pages a { 
11    text-decorationunderline
12} 
13#paginated, #paginated .yui-dt-loading { 
14    text-aligncenterbackground-colortransparent
15} 
view plain | print | ?

Markup:

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

JavaScript:

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

YUI Logger Output:

Logger Console

INFO2799ms (+2) 8:16:54 AM:

Connection

Transaction 0 sent.

INFO2797ms (+0) 8:16:54 AM:

Connection

Default HTTP header X-Requested-With set with value of XMLHttpRequest

INFO2797ms (+0) 8:16:54 AM:

Connection

Initialize transaction header X-Request-Header to XMLHttpRequest.

INFO2797ms (+1) 8:16:54 AM:

Connection

XHR object created for transaction 0

INFO2796ms (+2) 8:16:54 AM:

DataSource instance0

Making connection to live data for "results=504"

INFO2794ms (+2) 8:16:54 AM:

DataTable instance yui-dt0

DataTable showing message: Loading data...

INFO2792ms (+1) 8:16:54 AM:

DataTable instance yui-dt0

Accessibility TH cells for 5keys created

INFO2791ms (+3) 8:16:54 AM:

DataTable instance yui-dt0

TH cells for 5 keys created

INFO2788ms (+0) 8:16:54 AM:

RecordSet instance yui-rs0

RecordSet initialized

INFO2788ms (+3) 8:16:54 AM:

ColumnSet instance yui-cs0

ColumnSet initialized

INFO2785ms (+7) 8:16:54 AM:

DataSource instance0

DataSource initialized

INFO2778ms (+2778) 8:16:54 AM:

LogReader instance0

LogReader initialized

INFO0ms (+0) 8:16:52 AM:

global

Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More DataTable Control (beta) Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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