jQuery has a popular plugin known as Tablesorter, used to sort tabular data via JavaScript. It does its job well, and is easily (and highly) configurable, both its settings via JSON and the resulting table styles via CSS.

Tablesorter has a plugin called the Pager, designed to paginate tables via jQuery. The pager, just like the sorter, also works well, and is in itself also easily (and highly) configurable.

However, the difference between the two lie in the documentation: though Tablesorter is highly documented, the Pager’s official documentation is very scant, consisting only of an example in the Tablesorter page.

Thus, in thus series, I will try to address what the official documentation lacks: usage of the said companion plugin.

I would like first to emphasize that this series do not intend to replace the one in the official site (nor the very numerous helpful tips in StackOverflow or from other websites/blogs/forums shown by Google). Rather, my goal is to (somewhat) centralize all those knowledge out there, and (maybe) to add some of what I know. This will also serve as my notes for the said plugin.

To be honest, I really don’t know the version of Tablesorter I am using, so sorry (and feel free to correct) if anything is wrong here.

Acquisition

Tablesorter Pager is bundled with Tablesorter. You can download a copy (and read the documentation) in its official website, http://tablesorter.com/docsAccording to the documentation, you need jQuery v. 1.2.1 or higher in order for the plugin to run correctly. jQuery can be downloaded from here: http://jquery.com/

After uploading the necessary files to your server, we are now ready to include the scripts in our HTML code.

NOTE: It is highly recommended to use the minified version of the scripts, for they are lesser in size. Less size => less space taken up in server => less data to transmit to users => less bandwidth consumption => faster page loads.

Initialization

To include the script in your HTML file, you can copy-paste the following codes in the head section of your HTML file:<link rel='stylesheet' href='path/to/jqueryfile.min.js' type='text/css' /><link rel='stylesheet' href='path/to/jquery.tablesorter.min.js' type='text/css' /><link rel='stylesheet' href='path/to/jquery.tablesorter.pager.js' type='text/css' />

Next, attach the Tablesorter to a table:

$("table").tablesorter();

After attaching the sorter to a table, we then attach the pager to it:

$("table").tablesorterPager({container: $("pager")});

Or you may opt to do both things in one line:

$("table").tablesorter().tablesorterPager({container: $("pager")});

If you run the script at this point, you will see that the pager will not render. ``As is evident in the code, we have to define a place to “render” the pager itself.

You can use the following template to define your “rendering” area:

<div class="pager"><img src="path/to/images/firstarr.png"/><img src="path/to/images/prevarr.png"/><input type="text"/><img src="path/to/images/nextarr.png"/><img src="path/to/images/lastarr.png"/><select><option value="10">10 per page</option><option value="25">25 per page</option><option value="50">50 per page</option></select></div>

Where:

• firstarr.png: image to be clicked to get the first “page” of the table
• prevarr.png: image to be clicked to go back a “page” of the table
• nextarr.png: image to be clicked to go to the next “page” of the table
• lastarr.png: image to be clicked to get the last “page” of the table
• input field: where the “page number” of the table will be displayed
• options: number of fields to be displayed “per page” Format: <option value=”pagesize”>Description</option>

Of course, you may insert other elements as you wish inside the div. You may even change the container type of the pager (e.g., div to form tag). However, the bulleted elements above MUST be present in order for the pager to work as expected.Now, when you render the page, you will now see the plugin like the one demonstrated in the docs.

In the next entry, we will talk about how to configure the tablesorter plugin, and what options are available that we can manipulate to do certain interesting things.

Comments

None.