I’m a bit behind in blogging for class due to time constraints. I’m spending most of my free time working on my project. I have a bunch of ideas in the queue, but here’s one I just used tonight.

One aspect of the project requires a sortable table. Not easy to implement on my own, but I found the very nifty JQuery UI Tablesort plugin. This is pretty cool and pretty easy to implement. I’ll include some snippets from the page which shows the employees as list of all reservations.

Here is the JS code which creates the object:

<script type="text/javascript">

// add parser through the tablesorter addParser method
$.tablesorter.addParser({
// set a unique id
id: ‘restatus’,
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s) {
// format your data for normalization
return s.toLowerCase().replace(/made/,0).replace(/arrived/,1).replace(/seated/,2);
},
// set type, either numeric or text
type: ‘numeric’
}); $(document).ready(function()
{
$(“#restable”)
.tablesorter();
}
);
</script>

The first block is simply a function to allow me to sort the reservation status (e.g., has the party arrived, have they been seated) using an ordering index regardless of the text for the status. (E.g., I would want “Made” sorted before “Arrived”.)

The second block actually creates the applies the tablesorter object to the HTML table with the ID of restable. This table is a plain old HTML table with the addition of the class of tablesorter.

You can also download the themes from the site, put them in your CSS directory, and then include that in your header. With all that you get the following (on load):

If you click the Last Name column:

If you click the Date/Time column:

It does the date correctly automatically. (Verified as 11/30/2011 12:00 PM sorts before 11/30/2011 01:30 PM and before 01/20/2012 07:45 PM. If it was a simple text-based sort, this would not be the case as 0 comes before 1.)

It can also do multicolumn sort and a multitude of other things which I have not explored.