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]

In reply to Re: Need help to guide how to create client sort table ( mojo.template.array.autoindex.sortable.pl ) by Anonymous Monk
in thread Need help to guide how to create client sort table by GordonLim

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.