1

テーブルの並べ替えには tablesorter プラグインを使用しています。

情報

  • 2 つの異なる td にまたがる 1 つの th があります。th が 2 つの th:s であるかのようにソートする必要があります。
  • 「Testing2」が期待どおりに機能していません。3 番目の列を並べ替える必要があります。

jsfiddle

別の人のjsfiddleを更新しました。彼のコード全体をここに直接貼り付けなかったからです。

Jクエリ

$('table').tablesorter();
$('select').change(function(){
    var column = parseInt($(this).val(), 10),
        direction = 1, // 0 = descending, 1 = ascending
        sort = [[ column, direction ]];
    if (column >= 0) {
        $('table').trigger("sorton", [sort]);
    }
});

http://jsfiddle.net/Yke6M/53/

4

1 に答える 1

1

colspan最も簡単な解決策は、 （demo ）を持たない非表示の行を追加することだと思います：

<table class="tablesorter">
     <thead>
         <tr>
             <th>Alphabetic</th>
             <th colspan="2" style="text-align: center;">Testing</th>
             <th>Animals</th>
         </tr>
         <tr class="hidden">
             <td></td>
             <td></td>
             <td></td>
             <td></td>
         </tr> 
    </thead>
    <tbody>
    ...
    </tbody>
</table>

次に、それに応じてドロップダウンリストを変更します

<select>
    <option value="-">Choose a column</option>
    <option value="0">Alphabetic</option>
    <option value="1">Testing</option>
    <option value="2">Testing2</option>
    <option value="3">Animals</option>
</select>

jsFiddle でその行を非表示にするのに苦労した理由はわかりませんが、最終的に css を次のように変更しました。

th, tbody td {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
}
tr.hiddden {
    display: none;
}
于 2013-03-27T21:33:35.773 に答える