javascript - 按所有列标题排序

Question

我有一个在单击搜索按钮时动态生成的表格，如下所示:

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>"

我可以启用某种排序功能，以便可以按每一列(按应用程序、名称等)排序吗？我见过某种 jquery 表排序器和其他东西，但我无法用我的代码做到这一点。有人可以告诉我该怎么做吗？

[0,0][1,0]是什么意思？我如何相应地修改我的代码？:

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

Answer 1

您可以使用http://datatables.net/或http://tablesorter.com/docs/#Demo

对于像这样设置的表排序器

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

其中 sortList: [[0,0],[2,0]] 包含列索引(基于 0)和排序顺序。

因此 [[0,0],[2,0]] 意味着第一列和第三列将是可排序的，并且最初它们将按升序排序。

检查这个working fiddle其中选项已正确注释。

和here这是一个非常基本的版本，其中所有表格列都可以排序，但没有图形，例如箭头或背景。