0

次のように、検索ボタンをクリックすると動的に生成されるテーブルがあります。

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]]} ); 
    } 
);
4

2 に答える 2

2

ここにリストされているプラ​​グインを使用できます-> http://datatables.net/release-datatables/examples/basic_init/table_sorting.html

于 2012-05-30T15:20:31.313 に答える
2

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]]、1 列目と 3 列目は並べ替え可能で、最初は昇順で並べ替えられます。

オプションが適切にコメントされているこの作業フィドルを確認してください。

そして、すべてのテーブル列がソート可能であるが、矢印や背景などのグラフィックがない非常に基本的なバージョンがここにあります。

于 2012-05-30T15:20:43.667 に答える