toamitkumar's Code Blog

Ruby, Rails, RubyMotion, Chef, Puppet, Play and others. Opinions expressed here are my own and do not reflect those of my employer.

Lightweight Javascript Table Sorter Using Prototype

| Comments

The Javascript tablesorter is built on top of Prototype library. The library gives the dynamic feature of row formatting, maintain the sort order of the table on dynamic addition/deletion of a row, default sort order when the page loads, keep one or more columns unsortable, make multiple tables sortable on the same page etc.


* The table should have an id attribute
* It should have thead > tr > th as headers.
* It should have tbody > tr > td as body.
* thead > tr > th[class=”integer”] will make the column int sort
* thead > tr > th[class=”date”] will make the column date sort
* thead > tr > th[class=”float”] will make the column float sort
* thead > tr > th[class=”“] will make the column string sort
* thead > tr > th[class=”nosort”] will make the column unsortable
* thead > tr > th[class=”sort-asc”] will make the column default sort on page load
* sorterId = TableSortObserver.sortableTables[table_id];
sorterId.resort(sorterId.sortIndex, sorterId.sortOrder);
This will resort the table after dynamic addition/deletion of a row. It will retain the last sort column.


* TableSortObserver.bindEventsToTableRow(table_id)

The TableSortObserver retains all the sortable tables registered on the page. The sorter has been tesetd on IE 5/6, FF 2/3, Chrome, Safari.

Update: Source code on github


Amit Kumar
I am busy now, would need sometime to look into this.
Hi Amit

Thanx to your contribution in open source your code working fine but concern is its not working for hidden rows in that case odd even row css class applying is not working
Amit Kumar
This comment has been removed by the author.
Amit Kumar
Sorry for the delay in response, updated the post with source code location on Github
Where could I get the source code?