package JQuery::TableSorter ; our $VERSION = '1.00'; use warnings; use strict; use HTML::Table ; use JQuery::CSS ; sub new { my $this = shift; my $class = ref($this) || $this; my $my ; %{$my->{param}} = @_ ; die "No id defined for TableSorter" unless $my->{param}{id} =~ /\S/ ; die "No data defined for TableSorter" unless ref($my->{param}{data}) eq 'ARRAY' ; bless $my, $class; my $jquery = $my->{param}{addToJQuery} ; my $jqueryDir = $jquery->getJQueryDir ; $my->{fileDir} = "$jqueryDir/plugins" ; if ($my->{param}{css}) { push @{$my->{css}},$my->{param}{css} ; } $my->add_to_jquery ; return $my ; } sub add_to_jquery { my $my = shift ; my $jquery = $my->{param}{addToJQuery} ; if (defined $jquery) { $jquery->add($my) ; } } sub id { my $my = shift ; return $my->{param}{id} ; } sub HTML { my $my = shift ; my $data = $my->{param}{'data'} ; if (!defined $data) { die "TableSorter: No data field supplied\n" ; } my @data = @{$data} ; my $head = shift @data ; my $tile = new HTML::Table(-spacing=>0,-head=>$head ,-data=>\@data) ; my $id = $my->{param}{'id'} ; $tile =~ s!!! ; $tile =~ s!!! ; $tile =~ s!
!! ; return $tile ; } sub packages_needed { my $my = shift ; return ('tablesorter/jquery.tablesorter.js') ; } sub get_css { my $my = shift ; my $id = $my->id ; my $css =<<'EOD' ; #ID th { background-color: #e9e9da; } #ID td { padding:5px; } .headerSimple { background: #e9e9da url('PLUGIN_DIR/tablesorter/green_arrows.gif') no-repeat center left; color: #333; padding: 5px; padding-left: 25px; text-align: left; cursor: pointer; } .headerSimpleSortUp { background: #e9e900 url('PLUGIN_DIR/tablesorter/green_descending.gif') no-repeat center left; } .headerSimpleSortDown { background: #e9e900 url('PLUGIN_DIR/tablesorter/green_ascending.gif') no-repeat center left; } .even { background-color: lightblue; } .odd { background-color: #5AAFFF; } .highlight { color: grey; } .header { background-image: url(PLUGIN_DIR/tablesorter/header-bg.png); background-repeat: no-repeat; border-left: 1px solid #FFF; border-right: 1px solid #000; border-top: 1px solid #FFF; padding-left: 30px; padding-top: 4px; padding-bottom: 4px; height: auto; cursor: pointer; } .headerSortUp { background-image: url(PLUGIN_DIR/tablesorter/header-asc.png); background-repeat: no-repeat; border-left: 1px solid #FFF; border-right: 1px solid #000; border-top: 1px solid #FFF; padding-left: 30px; padding-top: 4px; padding-bottom: 4px; height: auto; cursor: pointer; } .headerSortDown { background-image: url(PLUGIN_DIR/tablesorter/header-desc.png); background-repeat: no-repeat; border-left: 1px solid #FFF; border-right: 1px solid #000; border-top: 1px solid #FFF; padding-left: 30px; padding-top: 4px; padding-bottom: 4px; height: auto; cursor: pointer; } EOD $css =~ s!#ID!#$id!g ; $css =~ s!PLUGIN_DIR!$my->{fileDir}!g ; return $css ; } sub get_jquery_code { my $my = shift ; # Construct the function for the table sorter # ????? disableHeader: ['ip'] This is an array # ????? columnParser: [[1,'url']] What is this???? my @names = qw[sortClassAsc sortClassDesc headerClass disableHeader columnParser dateFormat stripe sortColumn stripingRowClass highlightClass stripRowsOnStartUp] ; my $param = $my->{param} ; my $tableName = $param->{id} ; my $function = qq[\$("#$tableName").tableSorter({] . "\n" ; my @lines ; for my $name (@names) { my $value = $param->{$name} ; next unless defined $value ; if (ref($value) eq 'ARRAY') { my $values = join ',', map { "'" . $_ . "'" } @$value ; push @lines, " $name: [$values]" ; next ; } push @lines," $name: '$param->{$name}'" ; } my $lines = join(",\n",@lines) ; $function .= $lines ; $function .= "});\n" ; return $function ; } 1; =head1 NAME JQuery::TableSorter - The JQuery TableSorter =head1 SYNOPSIS 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','172.78.200.124','08:02','12-24-2000','Jul 6, 2006 8:14 AM'], ['66672','$2482.79','172.78.200.124','15:10','12-12-2001','Jan 6, 2006 8:14 AM'], ['66672', '$22.79','172.78.200.124','08:02','12-24-2000','Jul 6, 2006 8:14 AM'], ['66672','$2482.79','172.78.200.124','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, dateFormat=>'dd/mm/yyyy', 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 =head1 DESCRIPTION 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', or headerClass => 'headerSimple', sortClassAsc => 'headerSimpleSortUp', sortClassDesc => 'headerSimpleSortDown', To see them, run the jquery_tablesorter1.pl and jquery_tablesorter2.pl 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 L. Examples can be found at L. =head1 PARAMETERS These are the parameters that new can take. =over =item id id - css id - mandatory =item data data - a double array containing the data - mandatory =item headerClass headerClass - the name of the css class defining the header =item dateFormat dateFormat - format to display the date 'dd/mm/yyyy' =item sortColumn sortColumn - String of the name of the column to sort by. =item sortClassAsc sortClassAsc - headerSortUp - Class name for ascending sorting action to header =item sortClassDesc sortClassDesc - headerSortDown - Class name for descending sorting action to header =item headerClass headerClass -header Class name for headers (th's) =item highlightClass highlightClass - highlight - class name for sort column highlighting. =item headerClass headerClass - header Class name for headers (th's)=back =item stripingRowClass stripingRowClass - class =item disableHeader disableHeader - true/false =back =head1 FUNCTIONS =over =item HTML Get the HTML text for the object =item new Instantiate the object =back =head1 AUTHOR Peter Gordon, C<< >> =head1 BUGS Please report any bugs or feature requests to C, or through the web interface at L. I will be notified, and then you'll automatically be notified of progress on your bug as I make changes. =head1 SUPPORT You can find documentation for this module with the perldoc command. perldoc JQuery You can also look for information at: =over 4 =item * AnnoCPAN: Annotated CPAN documentation L =item * CPAN Ratings L =item * RT: CPAN's request tracker L =item * Search CPAN L =back =head1 ACKNOWLEDGEMENTS =head1 COPYRIGHT & LICENSE 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. =cut 1; # End of JQuery::TableSorter