Enable Sorting, Filtering And Pagination For Table - jQuery fancyTable

Enable Sorting, Filtering And Pagination For Table - jQuery fancyTable
File Size: 10.4 KB
Views Total:
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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<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">
  <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
  sortable: true,
  pagination: true, // default: false
  searchable: true,
  globalSearch: true,
});

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

$(".example").fancyTable({
  onInit: function(){ 
    // do something
  },
});

Changelog:

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.