Dynamically sorting a table with jQuery tablesorter plugin
I'm in the middle of building our user dashboard and have been using jQuery extensively to add a rich feel to the UI. Since our focus is data it's not surprising that I have some tables in our UI. I decided I should add some sorting functionality to the table for a couple of reasons; Iare dynamically adding rows to the table when new data is created and I also want Kwwika users to be able to sort tables to help them find data.
Rather than write some JavaScript from scratch, and was the case for many years, I automatically did a search for jQuery sort plugins and I managed to compile a list of few that seem to work or at least have potential. I eventually decided to go with tablesorter since it's been around for a while, is pretty stable, the code isn't too complex for what shouldn't be a complex thing and the styling was also nice an basic and could easily be customised.
We got the manual sorting functionality up and running really easily and I then added a couple of calls to first let the plugin know the data had been updated and then to tell the plugin to sort the table. Here's the code in its simplest format.
When you click the add button eventually the table.trigger("sorton", [[[1,0]]]) is called. The first parameter is the method to be called and the second parameter is something the documentation refers to as a sort list (important note: this parameter should be an array of parameters as defined in the jQuery trigger docs - this got us for a bit):
An array of instructions for per-column sorting and direction in the format: [[columnIndex, sortDirection], ... ] where columnIndex is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like: [[0,0],[1,0]]
But it doesn't work!
Those of you who have worked with JavaScript for a while will probably be aware that it's single-threaded (for getting Web Workers) and that queued scripts only get a chance to execute either when one finishes or a setTimeout is called. My hunch was that something within the "update" trigger call had pushed some execution into a setTimeout call so to work around this I needed to do the same for my "sorton" trigger call to make sure that all other processed had finished execution and the DOM and the tablesorter plugin were in the state I wanted to be in.
setTimeout(function()
{
var sorting = [[1,0]];
table.trigger("sorton", [sorting]);
}, 0);
It worked!
So, you'll be pleased to hear that the data tables within the Kwwika User Dashboard are nice and dynamic ready for users to find and organise their data.
Demo
Here's a link to a working demo.
Here's a full working listing of some example code:
Comments [0]