Jquery Plugin For Sorting Pagination And Filtering

Hey there! Thanks for dropping by. This time I’ll propose you a very useful plugin for managing pagination links. It’s important to keep your site links in good working order especially when your site have them a lot. The plugin I’m going to advocate you is called the jquery sorting plugin and has a lot of cool potentials.

You’ve worked hard on this big project and want to optimize everything, but you don’t know how. You’ve heard that perfect pagination and filtering can boost your conversion rate by ten, maybe even fifty percent! So where do you start? How do you do it? Don’t worry. I’ve made a free JQuery extension for all your pagination needs.

Never heard of sorting pagination or filtering? You’re not alone. Many website don’t take advantage of these two extremely useful tools and often leave their users with a poor experience.

Jquery Plugin For Sorting Pagination And Filtering

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.

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

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

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

3. To enable the table sorting functionality, your HTML table must have a thead element.

01<table id="example" class="example">
02  <thead>
03    <tr>
04      <th>Col A</th>
05      <th>Col B</th>
06      <th>Col C</th>
07    </tr>
08  </thead>
09  <tbody>
10    ...
11  </tbody>
12</table>

4. Call the function on the HTML table and enable/disable the orting, pagination, and live searching functionalities.

1$(".example").fancyTable({
2  sortColumn:0,// column number for initial sorting
3  sortOrder:'descending',// 'desc', 'descending', 'asc', 'ascending', -1 (descending) and 1 (ascending)
4  sortable:true,
5  pagination:true,// default: false
6  searchable:true,
7  globalSearch:true,
8  globalSearchExcludeColumns: [2,5]// exclude column 2 & 5
9});

5. Customize the pagination controls.

1$(".example").fancyTable({
2  pagination:false,
3  paginationClass:"btn btn-light",
4  paginationClassActive:"active",
5  pagClosest: 3,
6  perPage: 10,
7});

6. Customize the search field.

1$(".example").fancyTable({
2  inputStyle:"",
3  inputPlaceholder:"Search..."
4});

7. Customize the live search functionality.

01$(".example").fancyTable({
02 
03  // use global search for all columns
04  globalSearch:true,
05 
06  // exclude column 2 & 5
07  globalSearchExcludeColumns: [2,5],
08 
09  // use case sensitive search
10  matchCase:true,
11 
12  // use exact match
13  exactMatch:true,
14   
15});

8. Execute a function after init.

1$(".example").fancyTable({
2  onInit:function(){
3    // do something
4  },
5});

9. Execute a function after each update.

1$(".example").fancyTable({
2  onUpdate:function(){
3    console.log({ element:this });
4  }
5});

10. Customize the sort function.

view source

1$(".example").fancyTable({
2  sortFunction:function(a, b, o){
3    if(o.sortAs[o.sortColumn] =='numeric'){
4      return((o.sortOrder>0) ? parseFloat(a)-parseFloat(b) : parseFloat(b)-parseFloat(a));
5    }else {
6      return((a<b)?-o.sortOrder:(a>b)?o.sortOrder:0);
7    }
8  },
9});

Leave a Comment