Enable Sorting, Filtering And Pagination For Table - jQuery fancyTable

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.