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.

View example in new window.

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
Loading data...

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	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 \| ?

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.


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 \| ?

YAHOO.util.Event.onDOMReady(function () {

// Sort our data by state, then area code
    var Data = YAHOO.example.Data.areacodes;
    Data.sort(function (a,b) {
        return YAHOO.util.Sort.compare(a.state,b.state) ||
               YAHOO.util.Sort.compare(a.areacode,b.areacode);
    });

// Custom function we'll use to create the page links
    var buildPageLabel = function (recs) {
        var start = recs[0],
            end   = recs[1];

// Nested function to find the smallest substring
        // to indicate how two strings differ
        var diffNames = function (a,b) {
            var aa = a.state.toLowerCase(),
                bb = b.state.toLowerCase();

for (var i = 0, len = aa.length; i < len; ++i) {
                if (aa.charAt(i) !== bb.charAt(i)) {
                    return a.state.substr(0,i+1);
                }
            }

return a.state + ' ('+a.areacode+')';
        };

// Build label as "A - C" or "Abc - Def"
        var label = '';
        if (!start) {
            label = Data[0].state.substr(0,2) + ' - ';
        } else {
            label = diffNames(Data[start], Data[start-1]) + ' - ';
        }

if (Data[end+1]) {
            label += diffNames(Data[end], Data[end+1]);
        } else {
            label += diffNames(Data[end], Data[start]);
        }

return label;
    };

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 \| ?

// Paginator configurations
    var myPaginatorConfig = {
        // REQUIRED
        rowsPerPage : 20,

// REQUIRED, but DataTable will default if not provided
        containers  : 'pag',

// If not provided, there is no last page or total pages.
        // DataTable will set this in the DataSource callback, so this is
        // redundant.
        totalRecords : Data.length,

// page to activate at load
        initialPage : 3,

// Class the element(s) that will contain the controls
        containerClass : 'yui-pg-container', // default

// Define the innerHTML of the container(s) using placeholders
        // to identify where the controls will be located
        template :
            '<h3>Now showing:</h3>' +
            '<p>{CurrentPageReport}</p>' +
            '<p class="pg-nav">' +
                '{FirstPageLink} {PreviousPageLink} ' +
                '{NextPageLink} {LastPageLink}' +
            '</p>' +
            '<label>Page size: {RowsPerPageDropdown}</label>' +
            '<h3>Directory</h3>' +
            '{PageLinks}',

// If there is less data than would display on one page, pagination
        // controls can be omitted by setting this to false.
        alwaysVisible : true, // default

// Override setPage (et al) to immediately update internal values
        // and update the pagination controls in response to user actions.
        // Default is false; requests are delegated through the changeRequest
        // event subscriber.
        updateOnChange : false, // default

// Options for FirstPageLink component
        firstPageLinkLabel : "&lt;&lt;",
        firstPageLinkClass : "yui-pg-first", // default

// Options for LastPageLink component
        lastPageLinkLabel : "&gt;&gt;",
        lastPageLinkClass : "yui-pg-last", // default

// Options for PreviousPageLink component
        previousPageLinkLabel : "&lt; previous",
        previousPageLinkClass : "yui-pg-previous", // default

// Options for NextPageLink component
        nextPageLinkLabel : "next &gt;", // default
        nextPageLinkClass : "yui-pg-next", // default

// Options for PageLinks component
        pageLinksContainerClass : 'yui-pg-pages',        // default
        pageLinkClass           : 'yui-pg-page',         // default
        currentPageClass        : 'yui-pg-current-page', // default

// Display a maximum of X page links at a time.  Use
        // YAHOO.widget.Paginator.VALUE_UNLIMITED to show all page links
        pageLinks               : YAHOO.widget.Paginator.VALUE_UNLIMITED,

// Create custom page link labels
        pageLabelBuilder        : function (page,paginator) {
            return buildPageLabel(paginator.getPageRecords(page));
        },

// Options for RowsPerPageDropdown component
        rowsPerPageDropdownClass : "yui-pg-rpp-options", // default
        rowsPerPageOptions       : [
            { value : 20, text : "small" },
            { value : 40, text : "medium" },
            { value : 100, text : "large" }
        ],

// Options for CurrentPageReport component
        pageReportClass : 'yui-pg-current', // default

// Provide a key:value map for use by the pageReportTemplate.
        // Unlikely this will need to be customized; see API docs for the
        // template keys made available by the default value generator
        pageReportValueGenerator : function (paginator) {
            var recs  = paginator.getPageRecords();

return {
                start     : Data[recs[0]].state,
                end       : Data[recs[1]].state
            };
        },

// How to render the notification of the Paginator's current state
        pageReportTemplate : '{start} - {end}'
    };

// Create the Paginator for our DataTable to use
    var myPaginator = new YAHOO.widget.Paginator(myPaginatorConfig);

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 \| ?

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

Customizing pagination

Markup

CSS

Code

YUI Logger Output:

Logger Console

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: