Federman Scripts

After using my original Sortable Table for some time now, I’ve noticed something that could be better. Namely, type-awareness! I added the ability to declare each column as containing common type of data like numbers and dates as well as giving the functionality to enable writing custom sort functions.

Source: sortableTable.js
Example: Example

To declare a column as containing numbers, give the associated th, class="number". As you may guess, it basically just parses the string as a float (using parseFloat) before comparing, so “11″ will come after “2″. To sort dates, add class="date" to the th. This simply uses the Date.parse function before comparing.

Now that the “easy” ones were out of the way, I thought about how to give the developer a way to define their own sorting function, since strings, numbers, and dates won’t be the only things that should exist in a sortable table, for example, move ratings.

To do this, add class="custom_sortFunc" to your th where sortFunc is the JavaScript function you want to use to sort. This function should take two arguments and return an integer. The return value should be less than 0 if the first argument should be before the second, 0 if they’re equal sort-wise, and greater than 0 if the first should go after the second.

In the example, you see the following:

var movieRatings = new Array('G', 'PG', 'PG-13', 'R', 'NR');
function movieRatingSort(str1, str2)
{
	return movieRatings.indexOf(str1) - movieRatings.indexOf(str2);
}

My movie ratings th has class="custom_movieRatingSort". That’s all!

Note that there is no error checking in the way of checking to see that the custom sort function takes two arguments nor that the return type is an int, so funky things may happen if you give it an invalid function.

This article will describe a javascript which will make any <table> sortable on all columns.

Update: Thanks to a comment to this post, I corrected a problem with Firefox. I am now using textContext for non-IE browsers as it’s more widely supported.

Update 2: I’ve written a follow up to this article adding additional functionality not mentioned in this article.

Source: sortableTable.js

Example: Example

Here is an example (the above link will be better for looking at the HTML source):

With the javascript included, the table needs to have class sortableTable, exactly one <thead> with exactly one row, and exactly one <tbody>.

To make a particular column the default sorted column (it’s be sorted upon the initial page load), add the class defaultSort to the particular <th> in the one row in <thead>.

The javascript also automatically adds the classes even and odd to the even and odd numbered rows for ease of styling.

The sorting is done based off of the innerText textContent of each cell, so if the cell contains HTML and you are expecting it to sort in that way, it may be sorted differently. For example, if one cell had <a href="federmanscripts.com">Z</a> and another had <b>A</b>, the cell containing “Z” would be before the one containing “A” if innerText textContent was used, but with innerText textContent the “A” would come first, as expected by the user. In short, the displayed text in the cell is what the column is sorted by.