Minimal Table Sorter & Pager Plugin For jQuery
File Size: | 9.11 KB |
---|---|
Views Total: | 5482 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The table-sorter-pager provides 2 jQuery plugins that add convenient, performant, client-side pagination and sorting capability to existing HTML tables.
- pager.js: Auto generates pagination controls for your tables.
- Sorter.js: Sorts rows of your tables by strings and/or numeric values.
How to use it:
1. Include the required jQuery JavaScript library on the page.
<script src="https://code.jquery.com/jquery-3.4.0.slim.min.js" integrity="sha384-7WBfQYubrFpye+dGHEeA3fHaTy/wpTFhxdjxqvK04e4orV3z+X4XC4qOX3qnkVC6" crossorigin="anonymous"> </script>
2. Include the table pager and/or table sorter on the page.
<!-- Table Sorter --> <link href="sorter.css" rel="stylesheet"> <script src="sorter.js"></script> <!-- Table Pager --> <link href="pager.css" rel="stylesheet"> <script src="pager.js"></script>
3. Enable the table pager and/or table sorter on your HTML table. Note that you
<table class="tablesorter tablepager"> <thead> <tr> <th>Name <th>Company <th>Number </thead> <tbody> ... </tbody> <tbody>
$(function() { $('.tablesorter').tablesorter(); $('.tablepager').tablepager(); });
4. Disable the table sorter on specific table column using the data-tablesorter
attribute:
<table class="tablesorter tablepager"> <thead> <tr> <th>Name <th data-tablesorter="false">Company <th>Number </thead> <tbody> ... </tbody> <tbody>
5. Place the generated pagination controls in a specific container. Default: above the table.
<table class="tablesorter tablepager" data-pager-id="myContainer"> ... </table>
This awesome jQuery plugin is developed by czirkoszoltan. For more Advanced Usages, please check the demo page or visit the official website.