JQuery plugin for sorting tables: TableSorter.js. How to achieve pagination?

Introduction

When developing one project, I had to solve a problem with sorting data in a table. I did not want to use PHP for this, since the effect is lost when the page is reloaded. So I came across the official jQuery plugin " TableSorter.js " - www.tablesorter.com . Having a little rummaged in the English-language documentation, I was happy to find a link to the Russian-language website: www.tablesorter.ru .

In principle, everything was described very clearly and I quickly understood how everything works ...
But there was one important omission in the documentation: the principle of paginal navigation is not sufficiently described, and the necessary files are not uploaded. And I just needed this function, since my tables had at least 150 rows. I had to solve this problem myself.

Necessary materials

• We download / connect the following scripts to our page:
• JQuery itself: code.google.com/intl/en-RU/apis/libraries/devguide.html#jquery
• TableSorter plugin: tablesorter.ru/jquery.tablesorter.min.js
• TableSorter plugin for page navigation: tablesorter.ru/addons/pager/jquery.tablesorter.pager.js
• Bluish theme (there is a green one): tablesorter.ru/themes/blue/blue.zip
• Archive with pictures for page navigation: bazmaster.ru/downloads/table.zip

Page navigation

Now I will show you how to set up page navigation using this plugin - in fact, the solution is quite simple, but it took me a long time to find this solution.

I figured out this problem only by carefully studying the code of the example given there and downloading all the pictures and the code I need from the code of the page itself.
')
I collected the pictures in a separate archive, which you can use.

We connect all our scripts and styles in the HEAD tag of our page. They looked like this for me:

<link type="text/css" rel="stylesheet" href="bluetable/style.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.metadata.js"></script> <script type="text/javascript" src="/js/jquery.tablesorter.js"></script> <script type="text/javascript" src="/js/jquery.tablesorter.pager.js"></script> 

Here, in the HEAD tag, we write a javascript code that will make our table work correctly:

  <script type="text/javascript"> $(document).ready(function() { $("table") .tablesorter({widthFixed: true, widgets: ['zebra']}) .tablesorterPager({container: $("#pager")}); }); </script> 

Next, unpack the archive with pictures in the folder / images / table

Our table will look like this:

 <table cellspacing="1" class="tablesorter"> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td>28</td> <td>$9.99</td> <td>20%</td> <td>jul 6, 2006 8:14 am</td> </tr> <tr> <td></td> <td></td> <td>33</td> <td>$19.99</td> <td>25%</td> <td>dec 10, 2002 5:14 am</td> </tr> <tr> <td></td> <td></td> <td>18</td> <td>$15.89</td> <td>44%</td> <td>jan 12, 2003 11:14 am</td> </tr> <tr> <td></td> <td></td> <td>45</td> <td>$153.19</td> <td>44%</td> <td>jan 18, 2001 9:12 am</td> </tr> <tr> <td></td> <td></td> <td>22</td> <td>$13.19</td> <td>11%</td> <td>jan 18, 2007 9:12 am</td> </tr> </tbody> </table> 

And now we connect our very navigation elements that are not listed in the documentation (without them there will be errors on the page):

 <div id="pager" class="pager" style="top: 652px; position: absolute; "> <form> <img src="/images/table/first.png" class="first"> <img src="/images/table/prev.png" class="prev"> <input type="text" class="pagedisplay"> <img src="/images/table/next.png" class="next"> <img src="/images/table/last.png" class="last"> <select class="pagesize"> <option selected="selected" value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> </select> </form> </div> 

Everything! Now our table is working properly!