Enable Sorting, Filtering And Pagination For Table - jQuery fancyTable

Enable Sorting, Filtering And Pagination For Table - jQuery fancyTable
File Size: 13.3 KB
Views Total: 33802
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 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">
      <th>Col A</th>
      <th>Col B</th>
      <th>Col C</th>

4. Call the function on the HTML table and enable/disable the orting, pagination, and live searching functionalities.

  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.

  pagination: false,
  paginationClass: "btn btn-light",
  paginationClassActive: "active",
  pagClosest: 3,
  perPage: 10,

6. Customize the search field.

  inputStyle: "",
  inputPlaceholder: "Search..."

7. Customize the live search functionality.


  // 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.

  onInit: function(){ 
    // do something

9. Execute a function after each update.

    console.log({ element:this });

10. Customize the sort function.

  sortFunction: function(a, b, o){
    if(o.sortAs[o.sortColumn] == 'numeric'){
      return((o.sortOrder>0) ? parseFloat(a)-parseFloat(b) : parseFloat(b)-parseFloat(a));
    } else {


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.


  • 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.