Rather than overwhelming our visitors with a page that contains a table with hundreds of rows, pagination allows us to display a small subset of data at a given point of time. You can then provide navigation links that allow users to move through the other subsets of data, with ease.
The jQuery Pagination and Sorting example is shown in the figure below with Previous and Next navigation links to move back and forth:
In this article, we will see how to sort and paginate a Table. Create a new file called ‘TableSortPaginate.html’ and then add the following markup:
The HTML markup contains a table with a <thead> and <tbody>.
Using jQuery to Sort a Table
Let’s setup the script now. We will first add Sorting support to the table. I have used inline comments here to facilitate understanding:
The code defines a sortTable function that takes a table id, a column index (0-based) and a sorting direction. The sorting function uses jQuery sort() and eq() method.
In the sorting function, we have the “current” and previous element being sorted (in our case the rows) and we use the eq() function to get the column sorted. eq() will help us here because it reduces the set of matched elements to the one at the specified index.
The doc states: Given a jQuery object that represents a set of DOM elements, the .eq() method constructs a new jQuery object from one element within that set. The supplied index identifies the position of this element in the set.
In the sort function, we compare each td cell text with the next and obtain a sorted table.
With the function sortTable ready for use, we can attach an event handler to the click event on the th element (table header) and trigger the sort for the selected column.
When a column is sorted ascending or descending, we add a specific class to the td element. When a column is clicked, if it’s the currently sorted one, we switch the sort order. Alternatively, we remove the classes on all the columns and attach the new class to the selected column.
Go through the code a couple of times, along with the inline comments to understand what’s happening.
Using jQuery to Paginate a Table
With the sorting functionality working as desired, let’s now add pagination to the table. Our table markup remains the same, except that now we will add a div with two hyperlinks to navigate the table.
Let’s take a look at the code. I have on purpose replaced the Table Sorting code with ellipses (…) so that we can focus only on the pagination aspect of the table. However ‘TableSortPaginate.html’ contains the entire code both for Sorting as well as Pagination:
The code defines two data-attributes on the tbody element representing the current first row displayed on the table, and maximum size of each page. These attribute will be used in the code to define the elements to display, according to the current page.
In the paginate function, we calculate the element to display by using jQuery slice method which reduces the set of matched elements to a subset specified by a range of indices.
The doc states: Given a jQuery object that represents a set of DOM elements, the .slice() method constructs a new jQuery object containing a subset of the elements specified by the start and, optionally, end argument. The supplied start index identifies the position of one of the elements in the set; if end is omitted, all elements after this one will be included in the result.
Using slice, we obtain a subset of rows according to the current first-record element, incremented by the page size. Similarly the last element is the previously calculated new first element incremented by the page size.
Finally using jQuery :is method and :visible selector, we can check if the first/last element is visible and display the Next/Previous button accordingly.
Go through the code a couple of times along with the inline comments to get a grip of what’s going on.
Now we have the code to sort and paginate a table; the initTable function is triggered to setup an initial display state of the grid. The function uses paginate and sortTable functions to sort the grid by the first column ascending, and with a pagination of 4 rows per page.
In a future article, I will demonstrate how to create a SortandPaginate plugin which can be used on any table with the given structure.
Note: For a Table containing thousands of rows, client side pagination may not be a very good idea, as what you are essentially doing is loading all these rows in the browser and then displaying only a subset of data. In such cases, with a loaded table, server-side pagination is the way to go. Server-side pagination is beyond the scope of this book, but for those interested, you can read an article that shows how to do it using ASP.NET WebAPI and Knockout.js over here https://www.dotnetcurry.com/aspnet/942/sorting-pagination-grid-aspnet-webpai-knockoutjs
124 Defa Okundu