Article
Search
Share This
Most Popular
Who's online
Online users
User login
jQuery Tablesorter: Pagination and Sorting made simple
2212
For those who are not familiar with jQuery here is a brief overview.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
Below is an example that shows the power of jquery.
Tablesorter
Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.
Lets get started.
We have a table with following Data:
Last Name First Name Email Age Premium Amount
This is represented in a table as below.
| Last Name | First Name | Age | Premium Amount | |
|---|---|---|---|---|
| Mendes | Domnic | domnic@gmail.com | 29 | 5500 |
| Bharne | Sagar | sbharne@yahoo.com | 25 | 4500 |
| Rambo | John | sylvester@hotmail.com | 60 | 10000 |
| Fernandes | Timothy | timothy@fernandes.com | 35 | 6500 |
| Mendes | Danny | domnic@gmail.com | 29 | 5500 |
| Karpe | Sagar | sbharne@yahoo.com | 25 | 4500 |
| Stallone | Sylvester | sylvester@hotmail.com | 60 | 10000 |
| Fernandes | Domnic | timothy@fernandes.com | 35 | 6500 |
Please note the tablesorter works on HTML tables and the columns of table need to be specified in <thead></thead> tags as shown above.
Include the following js files in the <head></head> tag
<script type="text/javascript" src="/path/to/jquery-latest.js"></script> <script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>
Now, we need to initiate the table sorting action with the following javascript code:
<script defer="defer">
$(document).ready(function()
{
$("#insured_list").tablesorter();
}
);
</script>
insured_list is the id of table above
Adding the Pagination Code
Here is the additional html code for the paginator:
<div id="pager" class="pager"> <form> <img src="images/first.png" class="first"/> <img src="images/prev.png" class="prev"/> <input type="text" class="pagedisplay"/> <img src="images/next.png" class="next"/> <img src="images/last.png" class="last"/> <select class="pagesize"> <option value="">>LIMIT</option> <option value="2">2 per page</option> <option value="5">5 per page</option> <option value="10">10 per page</option> </select> </form> </div>
Include the following js files in the <head></head> tag:
<script type="text/javascript" src="/path/to/jquery-latest.js"></script> <script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> <script type="text/javascript" src="/path/to/jquery.tablesorter.pager.js"></script>
Here is the revised code for the pagination and sorter to attach the tablesorter feature:
<script defer="defer">
$(document).ready(function()
{
$("#insured_list")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
}
);
</script>
The following code is used for the pagination:
.tablesorterPager({container: $("#pager")}); Screen Shot of above example:
Download this complete example here
For more details on this plugin and various features/options available do visit:
http://tablesorter.com/docs/
Download Jquery and Plugins here:
http://tablesorter.com/docs/#Download
Note: Sort multiple columns simultaneously by holding down the shift key.
| Attachment | Size |
|---|---|
| tablesorter example.zip | 34.79 KB |
0