Adding paging

In this recipe, we will enable data paging. We will implement the YUI Paginator control, and configure the DataTable to display rows in blocks of five records. The YUI 2 DataTable control is compatible with the Paginator control. This allows us to enable familiar paging controls for our DataTable, which is particularly useful for large data sets.

Getting ready

Open the datatable.js file for editing. We will add an extra configuration object to add to the DataTable constructor.

How to do it...

First, we must include an additional module: yui2-paginator. We do this by modifying the first line of our code as follows:

YUI().use("yui2-datatable", "yui2-paginator", function(Y) {

Below the column definition object, add the following code:

var config = {
paginator : new YAHOO.widget.Paginator({
rowsPerPage: 5
}),
};

Next, we must pass this new configuration object to the DataTable by passing it as the fourth argument to the constructor. Modify the definition of the variable dataTable...