sort by all column headings

Question

I have a table which is dynamically generated upon clicking a search button as follows:

puts "<table class=\"resultsTable\">"
        puts "<tr><th colspan=\"10\" class=\"head\">Search Results</th></tr>"
        puts "<tr>"
        puts    "<th></th>"
        puts    "<th>App</th>"
        puts    "<th>Name</th>"
        puts    "<th>Region</th>"
        puts    "<th>Market</th>"
        puts    "<th>Language</th>"
        puts    "<th>Function</th>"
        puts    "<th>LOB</th>"
        puts    "<th>Term</th>"
        puts    "<th>Call</th>"
        puts "</tr>"
        puts "<tr>"
        puts    "<td id=\"$cellID\">"
        puts    "<img src=\"images/magnifier.gif\" style=\"cursor:pointer\" onclick=\"showRouting({'spec':'${specific}', 'id':'${mkt_id}', 'name':'${mkt_name}', 'xfer':'${xfertype}', 'cell':'${cellID}'})\"</img>"
        puts    "</td>"
        puts    "<td>$level</td>"
        puts    "<td>$name</td>"
        puts    "<td>$reg_name</td>"
        puts    "<td>$link</td>"
        puts    "<td>$lang</td>"
        puts    "<td>$func</td>"
        puts    "<td>$lob</td>"
        puts    "<td>$term</td>"
        puts    "<td>$call</td>"
        puts "</tr>"

Can I have some kind of sorting enabled so that I can sort by each column(By App,Name,etc.)? I have seen some sort of jquery table sorter and other things, but I am not able to do that with my code. Can someone please tell me how i would go about doing this?

what does the [0,0][1,0] mean? How would i modify my code accordingly?:

$(document).ready(function() 
    { 
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
); 

Answer 1

您可以使用此处列出的插件-> http://datatables.net/release-datatables/examples/basic_init/table_sorting.html

Answer 2

You can use http://datatables.net/ or http://tablesorter.com/docs/#Demo

For table sorter set up like this

// call the tablesorter plugin 
    $("table").tablesorter({ 
        // sort on the first column and third column, order asc 
        sortList: [[0,0],[2,0]] 
    }); 

where sortList: [[0,0],[2,0]] contains column index(0 based) and sort order.

So [[0,0],[2,0]] means first and 3rd column will be sortable and initially they will be sorted in ascending order.

Check this working fiddle where options has been commented properly.

And here goes a very basic version where all table columns are sortable but with no graphics eg arrows or backgrounds.