Dynamic Table Sorting & Pagination Plugin - smpSortableTable
File Size: | 9.73 KB |
---|---|
Views Total: | 16514 |
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);
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.