Yahoo! Developer Network Home - Help

YUI Library Examples: DataTable Control (beta): Configuring the Paginator

DataTable Control (beta): Configuring the Paginator

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.

State
Code
Area Codes by State
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

Customizing pagination

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.

Markup

1<div id="demo"
2    <div id="pag"></div> 
3    <div id="tbl"></div> 
4</div> 
view plain | print | ?

CSS

1#demo { 
2    width525px
3} 
4#pag { 
5    displayinline
6    floatleft
7    width250px
8    margin-top0
9} 
10#pag a { 
11    color: #0000de; 
12    text-decorationunderline
13    padding: .5ex 0
14} 
15#pag label { 
16    displayblock
17    margin1ex 0
18} 
19#pag p { 
20    margin: .25ex 0
21} 
22
23.yui-skin-sam #pag .yui-pg-pages { 
24    displayblock
25} 
26.yui-skin-sam #pag .yui-pg-page { 
27    displayblock
28    background-color: #f1f6f7
29    backgroundtransparent
30    bordernone
31    white-spacenormal
32} 
33.yui-skin-sam #pag .yui-pg-current-page { 
34    padding: .5ex 0
35    background-color: #ffe; 
36    font-styleitalic
37} 
38.yui-skin-sam #pag .yui-pg-current { 
39    margin0
40    white-spacenormal
41    font-weightbold
42    font-size113%
43} 
44.yui-skin-sam #demo .yui-dt caption { 
45    margin0.2em 0 0
46    color: #e76300
47    font-weightbold
48} 
view plain | print | ?

Code

We'll start by making sure our data is in order, then define the function that we'll use to populate the page links.

1YAHOO.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 
2var 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 : "&lt;&lt;"
45    firstPageLinkClass : "yui-pg-first"// default 
46 
47    // Options for LastPageLink component 
48    lastPageLinkLabel : "&gt;&gt;"
49    lastPageLinkClass : "yui-pg-last"// default 
50 
51    // Options for PreviousPageLink component 
52    previousPageLinkLabel : "&lt; previous"
53    previousPageLinkClass : "yui-pg-previous"// default 
54 
55    // Options for NextPageLink component 
56    nextPageLinkLabel : "next &gt;"// 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 
101var 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 
2var myColumnDefs = [ {key:"state",    label:"State", minWidth: 150}, 
3                     {key:"areacode", label:"Code",  width: 30}]; 
4 
5var myDataSource = new YAHOO.util.DataSource(Data); 
6myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; 
7myDataSource.responseSchema = { 
8    fields : ["state","areacode"
9}; 
10 
11// Pass the Paginator in the DataTable config 
12var myTableConfig = { 
13    paginator : myPaginator, 
14    caption : 'Area Codes by State' 
15}; 
16 
17var myDataTable = new YAHOO.widget.DataTable('tbl'
18        myColumnDefs, myDataSource, myTableConfig); 
view plain | print | ?

Copyright © 2008 Yahoo! Inc. All rights reserved.

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