Sorting a Table with Javascript
View the Table Sorting Demo
This example uses the Prototype Javascript library (1.5.0_pre1). It’s not an official release yet, so you will see IE exhibiting some bugs.
I think this demo is a good example of how easy it is to use Prototype to do simplify complex tasks. Prototype functions used are: $$(), $A(), each(), sortBy(), and stripTags(). All of which save me alot of hard work!
$$() = CSS Selectors in Javascript
$$() is probably one of the more exciting recent additions to Prototype because it allows you to use CSS selectors to target DOM elements. It even uses CSS2 attribute selectors! Once the IE bugs and memory leaks are ironed out, it’ll be feasable to use Javascript apply styles using CSS2 rules.
sortBy() = Easy sorting logic
Enumerable.sortBy() is a new toy I’m happy to have learned to use because it is so powerful. Feed it the value you want to be compared and it’ll handle the rest. It has all the logic inside it so you don’t have to get your hands dirty. Look at the code below to try to get a better idea of how to use it.
$$(“.genericTable thead th a”).each(
function(node, i){
node.onclick = function(){
// determine what column will be sorted by
columnIndex = $$(“.genericTable thead th”).indexOf(this.parentNode);
// sort!
sortTable(columnIndex);
// remove the ants and don’t follow the href
this.blur();
return false;
}
}
);
}
function sortTable(columnIndex){
unsortedRows = $$(“.genericTable tbody tr”);
sortedRows = unsortedRows.sortBy(function(node, i){
// feed the sortBy Enumerable method the column data to be compared
return $A(node.getElementsByTagName(“td”))[columnIndex].innerHTML.stripTags().toLowerCase();
});
// reverse
if(unsortedRows.first() == sortedRows.first()){
sortedRows.reverse();
}
// make the HTML
sortedRowsHTML = “”;
sortedRows.each(function(node, i){
sortedRowsHTML += “
});
// write the HTML to the page
Element.update($$(“.genericTable tbody”).first(), sortedRowsHTML);
}
window.onload = function(){
initializeFunctions();
}
April 11th, 2006 at 5:40 am
That does look pretty neat, I must give prototype a try – especially since it looks like they’ve stopped messing with Object.prototype
I’ve been using Dean Edwards CSS Query script – http://dean.edwards.name/my/cssQuery/ – for a current project, which I’ve been very impressed with. I wonder how prototype’s $$() compares with it?
June 23rd, 2006 at 4:55 am
I don’t know if prototype supports more or less selectors than css Query, but it certainly does support a lot.
Give event:Selectors a try:
http://encytemedia.com/event-selectors/
It’s based on prototypes $$ function, and it allows you to do:
var Rules = {
‘#mylist li:click’: function(e) {
// do something with e
}
}
EventSelectors.start(Rules);
Rather than:
function initializeFunctions(){
$$(‘#mylist li’).each(function(e)
{
e.onclick = function()
{
// do something with e
}
}
}
window.onload = function(){
initializeFunctions()
}
August 8th, 2006 at 10:42 pm
Check this page out – http://www.ericvasilik.com/2006/07/code-karma.html – for a good explaination of why your page doesn’t work in IE. In the comments here – http://www.ajaxian.com/archives/innerhtml-gotchas – from Paul Chiu is a fitting solution for your code.
You can replace:
Element.replace($$(“.genericTable tbody”).first(), sortedRowsHTML);
With
ieTableInnerHTML($$(“.genericTable tbody”).first(), sortedRowsHTML);
after droping in his function and your code will work in IE and Firefox.
-Rich