jquery-filter-table-with-pagination

jQuery Pugin to Make HTML Tables Searchable and Sortable with Pagination

by

jQuery fancy table is a jQuery plugin to make HTML tables searchable and sort using pagination. The fancyTable plugin adds very fast jQuery, client-side sorting, page splitting, and direct search functionality to your large spreadsheet.

table sorting paging and filtering with jquery demo, jquery table with sorting and pagination, dynamic table pagination using jquery, jquery plugin for sorting pagination and filtering, bootstrap table with filter and pagination

More features:

  • Click the table header to resort to the table.
  • Customize search field styles.
  • Allows you to specify the number of rows to display per page.
  • Global search or not.

How to make use of it:

1. Install & download.

# NPM
$ npm install @myspace-nu/jquery.fancytable --save

2. Load the jQuery fancyTable plugin’s script after the newest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/dist/fancyTable.min.js"></script>

3. To allow the table sorting functionality, your HTML table should have a thead aspect.

<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 allow/disable the orting, pagination, and stay looking out 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 reside 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 every update.

$(".example").fancyTable({
  onUpdate:function(){
    console.log({ element:this });
  }
});

Enable Sorting, Filtering And Pagination For Table, jQuery.fancyTable Plugin/Github, it helps us enable sorting pagination and search to our table data, pagination in html table using jquery without plugin, jquery filter table with pagination

See Demo And Download

Demo
Download

Official Website(myspace-nu): Click Here

This superior jQuery/javascript plugin is developed by myspace-nu. For extra Advanced Usages, please go to the official website.

Leave a Comment