YUI recommends YUI 3.
YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.
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 |
---|---|---|---|---|
Loading... |
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 | ? |
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.
INFO 186ms (+61) 12:56:25 AM:
LogReader instance0
LogReader initialized
INFO 125ms (+1) 12:56:25 AM:
DataSource instance0
Making connection to live data for "results=504"
INFO 124ms (+0) 12:56:25 AM:
DataTable instance yui-dt0
DataTable showing message: Loading...
WARN 124ms (+0) 12:56:25 AM:
DataTable instance yui-dt0
Could not find DragDrop for resizeable Columns
INFO 124ms (+4) 12:56:25 AM:
DataTable instance yui-dt0
TH cells for 5 keys created
INFO 120ms (+0) 12:56:25 AM:
RecordSet instance yui-rs7
RecordSet initialized
INFO 120ms (+2) 12:56:25 AM:
ColumnSet instance yui-cs1
ColumnSet initialized
INFO 118ms (+118) 12:56:25 AM:
DataSource instance0
DataSource initialized
INFO 0ms (+0) 12:56:25 AM:
global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Copyright © 2011 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings