JQuery::TableSorter - The JQuery TableSorter


    use JQuery ; 
    use JQuery::TableSorter ; 

    # define JQuery
    my $jquery = new JQuery ; 

    # Create data for the table
    my $data = [['Id','Total','Ip','Time','US Short Date','US Long Date'],
                ['66672',  '$22.79','','08:02','12-24-2000','Jul 6, 2006 8:14 AM'],
                ['66672','$2482.79','','15:10','12-12-2001','Jan 6, 2006 8:14 AM'],
                ['66672',  '$22.79','','08:02','12-24-2000','Jul 6, 2006 8:14 AM'],
                ['66672','$2482.79','','15:10','12-12-2001','Jan 6, 2006 8:14 AM']
               ] ;

    $jquery->add_css(new JQuery::CSS( hash => {
                                         '#table1' => {width => '900px', 'font-size' => '15px'}
                                        })) ; 

    # Create a TableSorter, add it to JQuery, and get the result as HTML
    my $tableHTML = JQuery::TableSorter->new(id => 'table1', 
                                             addToJQuery => $jquery,
                                             data => $data, 
                                             sortColumn => 'Total', 
                                             sortClassAsc => 'headerSortUp', 
                                             sortClassDesc => 'headerSortDown',
                                             headerClass => 'header',
                                             stripingRowClass =>  ['even','odd'],
                                             stripRowsOnStartUp => 'true',
                                             #highlightClass => 'highlight', 
                                             disableHeader => 'true'
                                             ))->HTML ; 
    # Get the JQuery code
    my $code = $jquery->get_jquery_code ;

    # Get the CSS
    my $css = $jquery->get_css ;  

    # All that needs to be done is to place the html, jquery code and css in a template


This module defines a table which is sorted when the user clicks the header. There are two builtin styles, to use them you have to set:

    headerClass => 'header',
    sortClassAsc => 'headerSortUp', 
    sortClassDesc => 'headerSortDown',


    headerClass => 'headerSimple',
    sortClassAsc => 'headerSimpleSortUp', 
    sortClassDesc => 'headerSimpleSortDown',

To see them, run the and examples.

In any event, you can always add CSS afterwards to change the appearance.

This module is based on the JQuery TableSorter. Definitive information for TableSorter can be found at Examples can be found at

PARAMETERS These are the parameters that new can take.

id id - css id - mandatory
data data - a double array containing the data - mandatory
headerClass headerClass - the name of the css class defining the header
dateFormat dateFormat - format to display the date 'dd/mm/yyyy'
sortColumn sortColumn - String of the name of the column to sort by.
sortClassAsc sortClassAsc - headerSortUp - Class name for ascending sorting action to header
sortClassDesc sortClassDesc - headerSortDown - Class name for descending sorting action to header
headerClass headerClass -header Class name for headers (th's)
highlightClass highlightClass - highlight - class name for sort column highlighting.
headerClass headerClass - header Class name for headers (th's)=back
stripingRowClass stripingRowClass - class
disableHeader disableHeader - true/false



Get the HTML text for the object


Instantiate the object


Peter Gordon, <peter at>


Please report any bugs or feature requests to bug-jquery-taconite at, or through the web interface at I will be notified, and then you'll automatically be notified of progress on your bug as I make changes.


You can find documentation for this module with the perldoc command.

    perldoc JQuery

You can also look for information at:



Copyright 2007 Peter Gordon, all rights reserved.

This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself.