This time I will share jQuery Plugin and tutorial about Simplest Table Paging & Sorting Plugin For jQuery – Sortpaginate.js, hope it will help you in programming stack.
Sortpaginate.js is a lightweight and simple-to-use jQuery plugin which adds pagination and sorting capabilities to your existing html table.
Basic usage:
1. Download and include the jQuery sortpaginate.js plugin after you have jQuery library installed.
1 |
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> |
2 |
<script src="scripts/jQuery.sortpaginate.js"></script> |
2. Call the function sortpaginate() on the html table and we’re ready to go.
1 |
$("table").sortpaginate(); |
3. Style the plugin and add sorting signals to your table’s header.
01 |
.sp_wrapper .sp_table table { table-layout: fixed; } |
03 |
.sp_wrapper .sp_table thead th { |
05 |
background-color: #fff; |
08 |
.sp_wrapper .sp_table .sp_sorted_asc { |
09 |
background-image: url("down-arrow.png"); |
10 |
background-position: right center; |
11 |
background-repeat: no-repeat; |
14 |
.sp_wrapper .sp_table .sp_sorted_desc { |
15 |
background-image: url("up-arrow.png"); |
16 |
background-position: right center; |
17 |
background-repeat: no-repeat; |
20 |
.sp_wrapper .sp_navigator .sp_next, .sp_wrapper .sp_navigator .sp_previous { |
5. Change the pageSize value for table pagination.
1 |
$("table").sortpaginate({pageSize: 5}); |
This awesome jQuery plugin is developed by dotnetcurry. For more Advanced Usages, please check the demo page or visit the official website.
