Enable Sorting, Filtering And Pagination For Table - jQuery fancyTable

Enable Sorting, Filtering And Pagination For Table - jQuery fancyTable
File Size: 12.4 KB
Views Total: 30517
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.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.