TableSorter Pager plugin installation and settings

Hi, My Dear Public. Today I want to talk how to work with Pager plugin for TableSorter. Tablesorter is very famous jQuery based plugin for sorting tabular data and is extendable a lot and We will explain HOW TO apply one of the standard tablesorter's plugins - Pager

In this tutorial we assume that you already have installed TableSorter on your page and is working otherwise you can read detailed tutorial on Tablesorter installation tutorial.

Data Gathering
First we will need to download the pager plugin located at Tablesorter Pager Plugin

Tablesorter's pager doesn't require any default css, but you can create one for you and work with, for example if you wish to use images (next,prev,first,last) as one sprite, you are free add your own css to current classes.

Now you need to get Tablesorter Pager's HTML. This is current HTML and as far as i remember never changed:)

 

  
  
  
  
  
  
   10
   20
   30
   50
  
 

Now we will need these 4 Images user in Tablesorter Pager
Download them here:
http://tablesorter.com/addons/pager/icons/first.png
http://tablesorter.com/addons/pager/icons/prev.png
http://tablesorter.com/addons/pager/icons/next.png
http://tablesorter.com/addons/pager/icons/last.png


Ok, At this point we got all we need to proceed to Tablesorter's Pager Installation Tutorial itself.

Now we should adjust and set up Tablesorter Pager's HTML: adjust

and like that with each image in HTML we just got. /path/to_your/images/first.png -> assume you stored images in images/pager, so the path to first.png will look like

NOTE: Don't change the class names (!), it is very important. At this step copy your tablesorter pager's HTML and past it at the place you want it to be around your data table, for example at the bottom. right or left or top left, etc. As you wish it looks better in your design of the page.

Ok, We got installed HTML, now we need to set JS and Instantiate the Pager. You can install the pager directly such as

Don't forget to replace the path to your tablesorter.pager.js
I can suggest for FrontEnd optimization purposes to append tablesorter.pager.js contents to tablesorter's code at the end.
Open tablesorter.pager.js copy it's content, go to tablesorter.js -> at the end of file past the pager's content, so you will economy one browser's request.

Instantiate:
You can instantiate them separately, but i prefer to chain, to not cause the mess in code.Chain will allow you to always find when it's being instantiated, especial in cases when you need few tablesorters with pager
We assume you have instatiated the table sorter on #table (id="table")

/**
 * in your (function(){ instance code });
 * or in your $(document).ready(function(){ instantiate code });
 * add the following code
 * pager's HTML wrapper should have id="pager" to work, later on we 
 * will explain how to change this behavior.
 **/
$('#table').tablesorter().tablesorterPager({container: $("#pager")});

Options/Settings:
To tell you the truth i didn't experiment with few of these options, but i will explain these i did.

/**
 * Starting page size (10 results now), you make it 20 results while starting pager
 * $('#table').tablesorter().tablesorterPager({container: $("#pager"),size:20});
 * and set first size in HTML to be 20 and the rest
 **/
size: 10, 

offset: 0, // int offset Used for fixing position in PX, but w/o word px. 

/**
 * Page parameter, used to set pager's current page. You can use it while starting
 * pager, to set for example to page 3 so u need to set 2
 * $('#table').tablesorter().tablesorterPager({container: $("#pager"),page:2});
 */
page: 0,

/**
 * Container parameter used to indicate the container of pager. Always use it.:)
 * $('#table').tablesorter().tablesorterPager({container: $("#pager")});
 */
container: null,

/**
 * Next 4 properties is styling, you can use them to change class names of buttons
 * You can also override them to IDs if you have collision when running few pagers.
 * $('#table').tablesorter().tablesorterPager({container: $("#pager"),cssNext:'#p1next'});
 * etc...
 */
cssNext: '.next',
cssPrev: '.prev',
cssFirst: '.first',
cssLast: '.last',

/**
 * Separrator between pager, eg. 1/7 indicates 1 of 7 pages, you can set it to " of "
 * so your pager will display 1 of 7. :)
 * $('#table').tablesorter().tablesorterPager({container: $("#pager"),seperator:" of "});
seperator: "/",

positionFixed: true, // This param also used for fixing position 

Tablesorter & Pager Troubleshooting:
If you meet any problem with tablesorter and/or pager that are not working.

First check if the ID's on instance meet the IDs on DOM Elements (eg. pager's div, table)
Remove options one by one, so you may detect exact option caused to bug.
If this didn't help, don't instantiate pager, maybe your browser can't find pager's script.
Try removing all the data from table, leave just one result and make sure there's not special charaters that may cause to something work wrong.



Have fun playing these setting. Sincerely, VR