Enable Sorting, Filtering And Pagination For Table - jQuery fancyTable

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 install @myspace-nu/jquery.fancytable --save

2. Load the jQuery fancyTable plugin's script after the latest jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
<script src="src/fancyTable.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.

  sortable: true,
  pagination: true, // default: false
  searchable: true,
  globalSearch: true

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. Perform a function after init.

  onInit: function(){ 
    // do something

This awesome jQuery plugin is developed by myspace-nu. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 11.12.2018
  • Source