Minimal Table Sorter & Pager Plugin For jQuery

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.