GordonLim has asked for the wisdom of the Perl Monks concerning the following question:

Hi All, Is anyone know how to make the Perl table have a sort filter like a Microsoft Excel? Maybe need to install any extra library? Below is my perl script show out the standard table in the broswer: 
open(INFO, "data.txt"); # Open db for reading
@array=<INFO>;
close (INFO);
@ascend=sort(@array);

print $status_table->header('text/html');    # create the HTTP header
print $status_table->start_html('Status Table');    # start the HTML
print $status_table->h1({-border=>'0',  -align=>'center'},'Welcome to 
+Engineering Equipment List');
print $status_table->start_table({-border=>'5',-align=>'center'});
print $status_table->start_Tr({-align=>'center', -style=>'background-c
+olor: #00BFFF'});
print $status_table->start_td;
print 'No';
print $status_table->start_td;
print 'Equipment ID';
print $status_table->start_td;
print 'Description';
print $status_table->start_td;
print 'Serial Number';
print $status_table->start_td;
print 'Asset Tag';
print $status_table->start_td;
print 'MIDA';
print $status_table->start_td;
print 'Old MIDA Ref';
print $status_table->start_td;
print 'Group';
print $status_table->start_td;
print 'Owner';
print $status_table->start_td;
print 'Location';
print $status_table->start_td;
print 'Location Comment';
print $status_table->start_td;
print 'Comment';
print $status_table->start_td;
print 'Cost Center';
print $status_table->start_td;
print 'Tagging Date';
print $status_table->end_td;
print $status_table->end_Tr;

foreach my $line (@ascend)
{
    my($Equipment_ID,$Description,$Serial_Number,$Asset_Tag,$MIDA,$Old
+_MIDA_Ref,$Group,$Owner,$Location,$Location_Comment,$Comment,$Cost_Ce
+nter,$Tagging_Date)=split(/\|/,$line);
    print $status_table->start_form(-name=>'Detail', -target=>'_top', 
+-method=>'post', -action=>'detail.pl');
    print $status_table->start_Tr;
    print $status_table->start_td({-align=>'center'});
    print $i++;
    print $status_table->start_td({-align=>'center'});
    print "$Equipment_ID";
    print $status_table->start_td;
    print "$Description";
    print $status_table->start_td({-align=>'center'});
    print "$Serial_Number";
    print $status_table->start_td({-align=>'center'});
    print "$Asset_Tag";
    print $status_table->start_td({-align=>'center'});
    print "$MIDA";
    print $status_table->start_td({-align=>'center'});
    print "$Old_MIDA_Ref";
    print $status_table->start_td({-align=>'center'});
    print "$Group";
    print $status_table->start_td({-align=>'center'});
    print "$Owner";
    print $status_table->start_td;
    print "$Location";
    print $status_table->start_td;
    print "$Location_Comment";
    print $status_table->start_td;
    print "$Comment";
    print $status_table->start_td({-align=>'center'});
    print "$Cost_Center";
    print $status_table->start_td({-align=>'center'});
    print "$Tagging_Date";
    print $status_table->end_td;
    print $status_table->end_Tr;   
    print $status_table->end_form;
}
print $status_table->end_table;    #end the table
print $status_table->end_html;    # end the HTML

[download]
Thanks

Replies are listed 'Best First'.
Re: Need help to guide how to create client sort table
by Anonymous Monk on Jun 24, 2013 at 02:51 UTC
[reply]
[d/l]
Re: Need help to guide how to create client sort table
by DrHyde (Prior) on Jun 25, 2013 at 10:38 UTC
    You need Javascript. I recommend this library.
[reply]
      Thanks DrHyde, this link is very useful for me. :)
[reply]
Re: Need help to guide how to create client sort table ( mojo.template.array.autoindex.sortable.pl )
by Anonymous Monk on Jun 25, 2013 at 01:28 UTC

    And here it is, if JQuery::TableSorter were added I'd look for (jquery/css) ways to disable the uparrow/downarrow links if user has javascript on, so the browser does the work, not perl

    I run this as perl mojo.template.array.autoindex.sortable.pl daemon --listen http://localhost:80/

    The some variable names are dumb :) The subs then mojo stuff before __DATA__ order is intentional, see Mojolicious::Lite 

    #!/usr/bin/perl --
# Automatically enables "strict", "warnings", "utf8" and Perl 5.10 fea
+tures
use Mojolicious::Lite;
sub my_sorted_fudge { ## has no pageination :P
    my( $sortorder, $sortindex ) = @_;
    $sortorder ||= '';
#~     $sortindex ||= 0;
    $sortindex = int $sortindex ;
    
    my %order  = (
        'ascend'  => sub { $$a[ $sortindex ] cmp $$b[ $sortindex ] },
        'descend' => sub { $$b[ $sortindex ] cmp $$a[ $sortindex ] },
        '' => undef, # default sort order, none
    );
    my $byorder = $order{ $sortorder };
    my @th =  ( "Ro", "Sham", "Bo" );
    my @array = (
      ["i", "f", "i"],
      ["q", "s", "n"],
      ["u", "g", "m"],
      ["j", "r", "n"],
      ["w", "r", "j"],
      ["q", "q", "n"],
      ["x", "p", "p"],
      ["o", "h", "b"],
      ["g", "x", "a"],
    );
    
    $byorder and @array = sort $byorder @array; ## don't sort by defau
+lt
    return \@array, \@th ;
}

sub mojo_index {
    my $self = shift;
    my $sortorder = $self->param('sortorder') || '';
    my $sortindex = $self->param('sortindex') || 0;
    my( $rah, $rahth ) = my_sorted_fudge( $sortorder, $sortindex );
    return $self->render(
        ray => $rah,
        rayth => $rahth,
        sortindex => $sortindex,
        sortorder => $sortorder,
        title => 'the sortening',
    );
}

## .ep templates are auto_escape <%= by default  / XML escaped result 
get '/' => \&mojo_index => 'index';;;
app->start;

    [download]
    __DATA__
@@ index.html.ep
% layout 'green';
%= content content => begin
    <table border="1">
        <thead>
            <tr>

%     for my $thix ( 0 .. $#$rayth ){
                <th>
                    <%# uparrow =%>
                    <a href="/?sortorder=ascend;sortindex=<%= $thix %>
+">&#8593;</a>
                    <%= $$rayth[$thix] =%>
                    <%# downarrow =%>
                    <a href="/?sortorder=descend;sortindex=<%= $thix %
+>">&#8595;</a>
                </th>

%     }
            </tr>
        </thead>
        <tbody>

%     for my $rai ( @$ray ) {
            <tr>
%         for my $cel ( @$rai ){
                <td> <%= $cel =%> </td>

%         }
            </tr>

%     }
        </tbody>
    </table>

%     if( $sortorder and defined $sortindex ){
    <div id="sortorderdesc"> * sortorder( <%=  $sortorder %>)
by sortindex( <%= $sortindex %> 
aka <%= $$rayth[ $sortindex ] %> )
</div>

%     }
% end


@@ layouts/green.html.ep
<html>
    <head>
    <title><%== title %></title>
    </head>
    <body bgcolor="lightgreen">
    <%= content %>
    </body>
</html>

    [download]
[reply]
[d/l]
[select]
      Thanks Anonymous Monk for provided me such long code. I will try this in next week due to some reason cannot install Mojolicious::Lite by this week. :)
[reply]

Back to Seekers of Perl Wisdom