Dynamic Table Sorting & Pagination Plugin - smpSortableTable

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);

4. Set the language you want to use. Possible languages: 'en', 'es', and 'pt'.

$('#myTable').smpSortableTable(myData, 5, 'en');

5. Make the table responsive.

$('#myTable').smpSortableTable(myData, 5, 'en',{
  responsive: true // default: true
});

6. Add extra CSS classes to tr and td elements.

$('#myTable').smpSortableTable(myData, 5, 'en',{
  tr: {
    class:""
  },

  td: {
    class:""
  }
});

Changelog:

2018-09-25

• Bugfix and empty cell text

2018-09-24

• Bugfix on custom sort data

2018-08-16

•   Settings object, localization, etc.

2018-08-15

• Responsiveness and styling

2018-07-31

• Bug fixes and additions

---

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