Table Sorting Pagination smpSortableTable - Download Dynamic Table Sorting & Pagination Plugin - smpSortableTable

Download Dynamic Table Sorting & Pagination Plugin – smpSortableTable

By Posted on

This time I will share jQuery Plugin and tutorial about Dynamic Table Sorting & Pagination Plugin – smpSortableTable, hope it will help you in programming stack.

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

Demo Download

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.

view source
1 <link rel="stylesheet" href="smpSortableTable.css">
2 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
3         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
4         crossorigin="anonymous"></script>
5 <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:

view source
01 <table id="myTable">
02   <thead>
03     <tr>
04       <th id="fname">First Name</th>
05       <th id="lname">Last Name</th>
06       <th id="age" class="smp-not-sortable">Age</th>
07       <th id="b<a href="https://www.jqueryscript.net/time-clock/">date</a>">Birthday</th>
08     </tr>
09   </thead>
10   <tbody>
11     ... Tabular Data Here
12   </tbody>
13 </table>
view source
1 // 10 records per page
2 $('#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:

view source
01 const myData = {
02       data: [{
03           "fname": "Tanner",
04           "lname": "Conner",
05           "age": 93,
06           "bdate": {"text": "04/09/1925", "sort": -1411540671}
07       }, {
08           "fname": "Karin",
09           "lname": "Book",
10           "age": 33,
11           "bdate": {"text": "01/21/1985", "sort": 475176129}
12       },
13       // ...
14       ]
15 };
view source
1 // 5 records per page
2 $('#myTable').smpSortableTable(myData, 5);

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

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

5. Make the table responsive.

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

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

view source
1 $('#myTable').smpSortableTable(myData, 5, 'en',{
2   tr: {
3     class:""
4   },
5  
6   td: {
7     class:""
8   }
9 });

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

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.

source : jquery.net

Related posts: