TableSorter - 使用 colspan 选择排序

【问题标题】：TableSorter - Select sort with colspanTableSorter - 使用 colspan 选择排序
【发布时间】：2013-03-28 05:33:35
【问题描述】：

我正在使用 tablesorter 插件对表格进行排序。

信息

我有一个跨越两个不同 td 的 th。我仍然需要像 th 是两个 th:s 一样进行排序。
“Testing2”未按预期工作。它应该对第三列进行排序。

jsfiddle

我已经更新了另一个人的 jsfiddle。因为我没有将他的整个代码直接粘贴到这里。

jQuery

$('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/

【问题讨论】：

标签： javascript jquery tablesorter

【解决方案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;
}

【讨论】：