Dynamic Table Sorting & Pagination Plugin - smpSortableTable

Dynamic Table Sorting & Pagination Plugin - smpSortableTable
File Size: 7.38 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

smpSortableTable is a jQuery plugin which provides user-friendly pagination and sorting functionalities on your large HTML table.

You can specify the number of table rows to show per page. Click on the table header for the multi-column alphanumeric sorting.

The plugin supports both static HTML table and dynamic tabular data defined in the JavaScript.

How to use it:

1. Link to jQuery library and the smpSortableTable plugin's files.

<link rel="stylesheet" href="smpSortableTable.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="smpSortableTable.js"></script>

2. Enable the pagination and sorting functionalities on an exisiting HTML table and specify the number of rows per page. You can also disbale the sorting functionality on a specific column using the smp-not-sortable class:

<table id="myTable">
  <thead>
    <tr>
      <th id="fname">First Name</th>
      <th id="lname">Last Name</th>
      <th id="age" class="smp-not-sortable">Age</th>
      <th id="bdate">Birthday</th>
    </tr>
  </thead>
  <tbody>
    ... Tabular Data Here
  </tbody>
</table>
// 10 records per page
$('#myTable').smpSortableTable(false, 10);

3. Enable the pagination and sorting functionalities on a dynamic HTML table that load tabular data from an array of objects as these:

const myData = {
      data: [{
          "fname": "Tanner",
          "lname": "Conner",
          "age": 93,
          "bdate": {"text": "04\/09\/1925", "sort": -1411540671}
      }, {
          "fname": "Karin",
          "lname": "Book",
          "age": 33,
          "bdate": {"text": "01\/21\/1985", "sort": 475176129}
      },
      // ...
      ]
};
// 5 records per page
$('#myTable').smpSortableTable(myData, 5);

This awesome jQuery plugin is developed by SimonPao. For more Advanced Usages, please check the demo page or visit the official website.