Enable Sorting, Filtering And Pagination For Table - jQuery fancyTable
File Size: | 15.3 KB |
---|---|
Views Total: | 47673 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The fancyTable jQuery plugin adds blazing fast, client-side sorting, pagination, and live searching functionalities to your large data table.
Compatible with the most popular CSS framework such as Bootstrap 4, Bootstrap 3, etc.
More features:
- Click the table header to re-sort the table.
- Customize the styles of the search field.
- Allows you specify how many rows to display per page.
- Global search or not.
How to use it:
1. Install & download.
# NPM $ npm install @myspace-nu/jquery.fancytable --save
2. Load the jQuery fancyTable plugin's script after the latest jQuery library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/dist/fancyTable.min.js"></script>
3. To enable the table sorting functionality, your HTML table must have a thead
element.
<table id="example" class="example"> <thead> <tr> <th>Col A</th> <th>Col B</th> <th>Col C</th> </tr> </thead> <tbody> ... </tbody> </table>
4. Call the function on the HTML table and enable/disable the orting, pagination, and live searching functionalities.
$(".example").fancyTable({ sortColumn:0, // column number for initial sorting sortOrder: 'descending', // 'desc', 'descending', 'asc', 'ascending', -1 (descending) and 1 (ascending) sortable: true, pagination: true, // default: false searchable: true, globalSearch: true, globalSearchExcludeColumns: [2,5] // exclude column 2 & 5 });
5. Customize the pagination controls.
$(".example").fancyTable({ pagination: false, paginationClass: "btn btn-light", paginationClassActive: "active", pagClosest: 3, perPage: 10, });
6. Customize the search field.
$(".example").fancyTable({ inputStyle: "", inputPlaceholder: "Search..." });
7. Customize the live search functionality.
$(".example").fancyTable({ // use global search for all columns globalSearch: true, // exclude column 2 & 5 globalSearchExcludeColumns: [2,5], // use case sensitive search matchCase: true, // use exact match exactMatch: true, });
8. Execute a function after init.
$(".example").fancyTable({ onInit: function(){ // do something }, });
9. Execute a function after each update.
$(".example").fancyTable({ onUpdate:function(){ console.log({ element:this }); } });
10. Customize the sort function.
$(".example").fancyTable({ sortFunction: function(a, b, o){ if(o.sortAs[o.sortColumn] == 'numeric'){ return((o.sortOrder>0) ? parseFloat(a)-parseFloat(b) : parseFloat(b)-parseFloat(a)); } else { return((a<b)?-o.sortOrder:(a>b)?o.sortOrder:0); } }, });
Changelog:
v1.0.35 (2023-11-17)
- Fix falsy sort values
v1.0.34 (2023-05-06)
- feat - creation of a new parameter function to be executed before an update (filter, mainly).
- Fix numerical compare of non numeric values
v1.0.33 (2022-11-18)
- Sort values of equal priority according to current row order
v1.0.32 (2022-08-20)
- Sort values of equal priority according to current row order
v1.0.31 (2022-07-29)
- CSS update
v1.0.30 (2022-04-14)
- Fix 0 values in data-sortvalue
v1.0.28 (2022-03-09)
- Fix exactMatch: "auto" comparisons
v1.0.27 (2022-03-09)
- Update fancyTable.min.js
v1.0.26 (2021-11-17)
- Update fancyTable.min.js
v1.0.25 (2021-11-16)
- Fix search field overflow
v1.0.24 (2021-10-12)
- Improve web accessibility / WAI, again.
v1.0.23 (2021-10-08)
- Improve web accessibility / WAI
v1.0.22 (2021-09-08)
- Add custom sort function
v1.0.21 (2021-08-14)
- Add exactMatch and matchCase options
v1.0.20 (2021-01-07)
- Update fancyTable.min.js
v1.0.19 (2020-10-27)
- Add case insensitive sort order.
v1.0.18 (2019-12-15)
- Added reinit method
v1.0.17 (2019-12-13)
- Return to page 1 after updating filter.
v1.0.16 (2019-07-30)
- Add configuration options for sortOrder and globalSearchExcludeColumns.
v1.0.16 (2019-07-30)
- Add configuration options for sortOrder and globalSearchExcludeColumns.
v1.0.15 (2019-03-25)
- Add onInit and onUpdate events.
v1.0.14 (2019-03-20)
- Add option for numerical sort order.
v1.0.13 (2019-03-19)
- Allow pagination controll to be placed anywhere.
2019-03-07
- Add sort order indicator.
This awesome jQuery plugin is developed by myspace-nu. For more Advanced Usages, please check the demo page or visit the official website.