This example demonstrates the various configuration options for the YAHOO.widget.Paginator class included with the DataTable. Note that all navigation in the left column is generated by the Paginator.
California - Connecticut
State | Code |
---|
State | Code |
---|---|
California | 714 |
California | 760 |
California | 805 |
California | 818 |
California | 831 |
California | 858 |
California | 909 |
California | 916 |
California | 925 |
California | 949 |
Cayman Islands | 345 |
CNMI | 670 |
Colorado | 303 |
Colorado | 719 |
Colorado | 720 |
Colorado | 970 |
Connecticut | 203 |
Connecticut | 475 |
Connecticut | 860 |
Connecticut | 959 |
Loading data... |
Besides the normal configurations for pagination, we'll demonstrate the use of the other Paginator configuration options. Most notably, we'll use the template
and pageLabelBuilder
options to render the pagination controls in a custom layout with more descriptive page links.
1 | <div id="demo"> |
2 | <div id="pag"></div> |
3 | <div id="tbl"></div> |
4 | </div> |
view plain | print | ? |
1 | #demo { |
2 | width: 525px; |
3 | } |
4 | #pag { |
5 | display: inline; |
6 | float: left; |
7 | width: 250px; |
8 | margin-top: 0; |
9 | } |
10 | #pag a { |
11 | color: #0000de; |
12 | text-decoration: underline; |
13 | padding: .5ex 0; |
14 | } |
15 | #pag label { |
16 | display: block; |
17 | margin: 1ex 0; |
18 | } |
19 | #pag p { |
20 | margin: .25ex 0; |
21 | } |
22 | |
23 | .yui-skin-sam #pag .yui-pg-pages { |
24 | display: block; |
25 | } |
26 | .yui-skin-sam #pag .yui-pg-page { |
27 | display: block; |
28 | background-color: #f1f6f7; |
29 | background: transparent; |
30 | border: none; |
31 | white-space: normal; |
32 | } |
33 | .yui-skin-sam #pag .yui-pg-current-page { |
34 | padding: .5ex 0; |
35 | background-color: #ffe; |
36 | font-style: italic; |
37 | } |
38 | .yui-skin-sam #pag .yui-pg-current { |
39 | margin: 0; |
40 | white-space: normal; |
41 | font-weight: bold; |
42 | font-size: 113%; |
43 | } |
44 | .yui-skin-sam #demo .yui-dt caption { |
45 | margin: 0.2em 0 0; |
46 | color: #e76300; |
47 | font-weight: bold; |
48 | } |
view plain | print | ? |
We'll start by making sure our data is in order, then define the function that we'll use to populate the page links.
1 | YAHOO.util.Event.onDOMReady(function () { |
2 | |
3 | // Sort our data by state, then area code |
4 | var Data = YAHOO.example.Data.areacodes; |
5 | Data.sort(function (a,b) { |
6 | return YAHOO.util.Sort.compare(a.state,b.state) || |
7 | YAHOO.util.Sort.compare(a.areacode,b.areacode); |
8 | }); |
9 | |
10 | // Custom function we'll use to create the page links |
11 | var buildPageLabel = function (recs) { |
12 | var start = recs[0], |
13 | end = recs[1]; |
14 | |
15 | // Nested function to find the smallest substring |
16 | // to indicate how two strings differ |
17 | var diffNames = function (a,b) { |
18 | var aa = a.state.toLowerCase(), |
19 | bb = b.state.toLowerCase(); |
20 | |
21 | for (var i = 0, len = aa.length; i < len; ++i) { |
22 | if (aa.charAt(i) !== bb.charAt(i)) { |
23 | return a.state.substr(0,i+1); |
24 | } |
25 | } |
26 | |
27 | return a.state + ' ('+a.areacode+')'; |
28 | }; |
29 | |
30 | // Build label as "A - C" or "Abc - Def" |
31 | var label = ''; |
32 | if (!start) { |
33 | label = Data[0].state.substr(0,2) + ' - '; |
34 | } else { |
35 | label = diffNames(Data[start], Data[start-1]) + ' - '; |
36 | } |
37 | |
38 | if (Data[end+1]) { |
39 | label += diffNames(Data[end], Data[end+1]); |
40 | } else { |
41 | label += diffNames(Data[end], Data[start]); |
42 | } |
43 | |
44 | return label; |
45 | }; |
view plain | print | ? |
We'll assign something to every available Paginator configuration key, if even the default value, just for illustration.
1 | // Paginator configurations |
2 | var myPaginatorConfig = { |
3 | // REQUIRED |
4 | rowsPerPage : 20, |
5 | |
6 | // REQUIRED, but DataTable will default if not provided |
7 | containers : 'pag', |
8 | |
9 | // If not provided, there is no last page or total pages. |
10 | // DataTable will set this in the DataSource callback, so this is |
11 | // redundant. |
12 | totalRecords : Data.length, |
13 | |
14 | // page to activate at load |
15 | initialPage : 3, |
16 | |
17 | // Class the element(s) that will contain the controls |
18 | containerClass : 'yui-pg-container', // default |
19 | |
20 | // Define the innerHTML of the container(s) using placeholders |
21 | // to identify where the controls will be located |
22 | template : |
23 | '<h3>Now showing:</h3>' + |
24 | '<p>{CurrentPageReport}</p>' + |
25 | '<p class="pg-nav">' + |
26 | '{FirstPageLink} {PreviousPageLink} ' + |
27 | '{NextPageLink} {LastPageLink}' + |
28 | '</p>' + |
29 | '<label>Page size: {RowsPerPageDropdown}</label>' + |
30 | '<h3>Directory</h3>' + |
31 | '{PageLinks}', |
32 | |
33 | // If there is less data than would display on one page, pagination |
34 | // controls can be omitted by setting this to false. |
35 | alwaysVisible : true, // default |
36 | |
37 | // Override setPage (et al) to immediately update internal values |
38 | // and update the pagination controls in response to user actions. |
39 | // Default is false; requests are delegated through the changeRequest |
40 | // event subscriber. |
41 | updateOnChange : false, // default |
42 | |
43 | // Options for FirstPageLink component |
44 | firstPageLinkLabel : "<<", |
45 | firstPageLinkClass : "yui-pg-first", // default |
46 | |
47 | // Options for LastPageLink component |
48 | lastPageLinkLabel : ">>", |
49 | lastPageLinkClass : "yui-pg-last", // default |
50 | |
51 | // Options for PreviousPageLink component |
52 | previousPageLinkLabel : "< previous", |
53 | previousPageLinkClass : "yui-pg-previous", // default |
54 | |
55 | // Options for NextPageLink component |
56 | nextPageLinkLabel : "next >", // default |
57 | nextPageLinkClass : "yui-pg-next", // default |
58 | |
59 | // Options for PageLinks component |
60 | pageLinksContainerClass : 'yui-pg-pages', // default |
61 | pageLinkClass : 'yui-pg-page', // default |
62 | currentPageClass : 'yui-pg-current-page', // default |
63 | |
64 | // Display a maximum of X page links at a time. Use |
65 | // YAHOO.widget.Paginator.VALUE_UNLIMITED to show all page links |
66 | pageLinks : YAHOO.widget.Paginator.VALUE_UNLIMITED, |
67 | |
68 | // Create custom page link labels |
69 | pageLabelBuilder : function (page,paginator) { |
70 | return buildPageLabel(paginator.getPageRecords(page)); |
71 | }, |
72 | |
73 | // Options for RowsPerPageDropdown component |
74 | rowsPerPageDropdownClass : "yui-pg-rpp-options", // default |
75 | rowsPerPageOptions : [ |
76 | { value : 20, text : "small" }, |
77 | { value : 40, text : "medium" }, |
78 | { value : 100, text : "large" } |
79 | ], |
80 | |
81 | // Options for CurrentPageReport component |
82 | pageReportClass : 'yui-pg-current', // default |
83 | |
84 | // Provide a key:value map for use by the pageReportTemplate. |
85 | // Unlikely this will need to be customized; see API docs for the |
86 | // template keys made available by the default value generator |
87 | pageReportValueGenerator : function (paginator) { |
88 | var recs = paginator.getPageRecords(); |
89 | |
90 | return { |
91 | start : Data[recs[0]].state, |
92 | end : Data[recs[1]].state |
93 | }; |
94 | }, |
95 | |
96 | // How to render the notification of the Paginator's current state |
97 | pageReportTemplate : '{start} - {end}' |
98 | }; |
99 | |
100 | // Create the Paginator for our DataTable to use |
101 | var myPaginator = new YAHOO.widget.Paginator(myPaginatorConfig); |
view plain | print | ? |
Beyond this, it's simply a matter of creating your DataTable as normal.
1 | // Normal DataTable configuration |
2 | var myColumnDefs = [ {key:"state", label:"State", minWidth: 150}, |
3 | {key:"areacode", label:"Code", width: 30}]; |
4 | |
5 | var myDataSource = new YAHOO.util.DataSource(Data); |
6 | myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; |
7 | myDataSource.responseSchema = { |
8 | fields : ["state","areacode"] |
9 | }; |
10 | |
11 | // Pass the Paginator in the DataTable config |
12 | var myTableConfig = { |
13 | paginator : myPaginator, |
14 | caption : 'Area Codes by State' |
15 | }; |
16 | |
17 | var myDataTable = new YAHOO.widget.DataTable('tbl', |
18 | myColumnDefs, myDataSource, myTableConfig); |
view plain | print | ? |
INFO0ms (+0) 5:08:24 AM:global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings