jQuery - Basic Alphabetical Sorting

Now let's perform a sort on the Title column of the table. We'll need a class on the table header cell so that we can select it properly:

To perform the actual sort, we can use JavaScript's built in .sort() method. It does an in‑place sort on an array, and can take a function as an argument. This function compares two items in the array and should return a positive or negative number depending on the result. Our initial sort routine looks like this:

$(document).ready(function() {
 
$('table.sortable').each(function() {
 
var $table = $(this);
 
$('th', $table).each(function(column) {
 
if ($(this).is('.sort-alpha')) {
 
$(this).addClass('clickable').hover(function() {
 
$(this).addClass('hover');
 
}, function() {
 
$(this).removeClass('hover');
 
}).click(function() {
 
var rows = $table.find('tbody > tr').get();
 
rows.sort(function(a, b) {
 
var keyA = $(a).children('td').eq(column).text().toUpperCase();
 
var keyB = $(b).children('td').eq(column).text().toUpperCase();
 
if (keyA < keyB) return -1;
 
if (keyA > keyB) return 1;
 
return 0;
 
});
 
$.each(rows, function(index, row) {
 
$table.children('tbody').append(row);
 
});
 
});
 
}
 
});
 
});
 
});

The first thing to note is our use of the .each() method to make iteration explicit. Even though we could bind a click handler to all headers with the sort-alpha class just by calling $('table.sortable th.sort-alpha').click(), this wouldn't allow us to easily capture a crucial bit of information—the column index of the clicked header. Because .each() passes the iteration index into its callback function, we can use it to find the relevant cell in each row of the data later

Once we have found the header cell, we retrieve an array of all of the data rows. This is a great example of how .get() is useful in transforming a jQuery object into an array of DOM nodes; even though jQuery objects act like arrays in many respects, they don't have any of the native array methods available, such as .sort().

With .sort() at our disposal, the rest is fairly straightforward. The rows are sorted by comparing the textual contexts of the relevant table cell. We know which cell to look at because we captured the column index in the enclosing .each() call. We convert the text to uppercase because string comparisons in JavaScript are case-sensitive and we wish our sort to be case-insensitive. Finally, with the array sorted, we loop through the rows and reinsert them into the table. Since .append() does not clone nodes, this moves them rather than copying them. Our table is now sorted.

This is an example of progressive enhancement's counterpart, graceful degradation. Unlike with the AJAX solution discussed earlier, we cannot make the sort work without JavaScript, as we are assuming the server has no scripting language available to it in this case. The JavaScript is required for the sort to work, so by adding the "clickable" class only through code, we make sure not to indicate with the interface that sorting is even possible unless the script can run. The page degrades into one that is still functional, albeit without sorting available.

We have moved the actual rows around, hence our alternating row colors are now out of whack:

We need to reapply the row colors after the sort is performed. We can do this by pulling the coloring code out into a function that we call when needed:

$(document).ready(function() {
 
var alternateRowColors = function($table) {
 
$('tbody tr:odd', $table).removeClass('even').addClass('odd');
 
$('tbody tr:even', $table).removeClass('odd').addClass('even');
 
};
 
 
 
$('table.sortable').each(function() {
 
var $table = $(this);
 
alternateRowColors($table);
 
$('th', $table).each(function(column) {
 
if ($(this).is('.sort-alpha')) {
 
$(this).addClass('clickable').hover(function() {
 
$(this).addClass('hover');
 
}, function() {
 
$(this).removeClass('hover');
 
}).click(function() {
 
var rows = $table.find('tbody > tr').get();
 
rows.sort(function(a, b) {
 
var keyA = $(a).children('td').eq(column).text().toUpperCase();
 
var keyB = $(b).children('td').eq(column).text().toUpperCase();
 
if (keyA < keyB) return -1;
 
if (keyA > keyB) return 1;
 
return 0;
 
});
 
$.each(rows, function(index, row) {
 
$table.children('tbody').append(row);
 
});
 
alternateRowColors($table);
 
});
 
}
 
});
 
});
 
});

Learning jQuery - Basic Alphabetical Sorting

Tags