jQuery Tables with sort and search

Posted in Tutorials

In this tutorial, we will use DataTables.net (a jQuery plugin) to make a table with sort and search capabilities.  Demo here.

We start with a normal HTML table.  But make sure to use the thead and tbody tags as shown below because DataTables will look for these tags to do its magic.

This is an example table listing the underscore.js collection functions.  With plain HTML table, it looks like this …

Not looking too great. Huh?

Now we add in DataTables.net plugin by including its CSS and its JS.  There are CDN versions of these listed on their site.  And that is what we’ll use.

Because DataTables depends on jQuery, we also added the CDN version of jQuery ABOVE the DataTables JS.

Note that because these CDN URL’s typically do not have “http:”, it may not work on local machine.  But it will work up on the server host.

Next, give our table tag an id for jQuery to reference …

<table id=”collectionTable”>

We gave it id of “collectionTable”.   Then at the bottom of our file, start a script and within jQuery’s document ready, call dataTable() on our table element …

Refresh our browser and we see that our plain HTML table has turned into this …

You can add styling with CSS to make it prettier.  But look at all the functionality that it gave you.  You got pagination where the user can choose from a droplist the number of items per page.  You can sort up and down each column.  And try out the search function.

This is DataTables with its default no-configuration option.  If you look in the docs, you will find that there are many more options and that it is very configurable.

No initial Sort in DataTables

You will note that the data is initially sort by the first column by default.  If you want no initial sort order.  You can do instead …

Then data will be in the order that it is in the HTML initially.  But still sortable by the user later.

Custom Sort with DataTables

DataTables enables you to provide your own sort algorithm.  We have three columns in our table.  Doing a default sort on the three column, the code will be like …

The value for sType can be “string”, numeric, date and html (which will strip HTML tags before sorting).  But we make our own called “my_custom_sort” for the first column like this …

Note that we define the asc and desc sort function into the $.fn.dataTableExt.oSort array.  Right now shown above is the normal string sort function.

But let’s say that we want the first column to be sorted such that whenever the value “sample” if found, it should be listed first in sort order.   So we alter the sort functions like the following…

Example here.  Note the if we name our custom sort to be “my_custom_sort” and the ascending and descending custom function should be name the same but with the “-asc” and “-desc” suffixed at the end.

Sort on Multiple Columns with DataTables

Suppose we want to sort first on the first column and then sort next on the second column in the event that the first column value are equal.  This is known as multi-column ordering.  We do …

---