Wednesday, January 7, 2009

Lightweight Javascript Table Sorter using Prototype

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


Metalod said...

Where could I get the source code?

Amit Kumar said...

Sorry for the delay in response, updated the post with source code location on Github

Amit Kumar said...
This comment has been removed by the author.
PHP_GURU said...

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 said...

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