具有两个 header 行和第二 header 行中的多选下拉列表的表格排序器

Question

我在 table 中有两个 header 行，有 10 多列。在第二行 header 中，几乎所有列都有 select drop-downs。我使用 bootstrap multiselect 作为 select 字段，使用 tablesorter 对每一列的行进行排序。最初，table 没有行，table 数据是通过 ajax 动态生成的。所以我在 ajax 函数中调用 tablesorter。在调用 tablesorter 之前，我可以从 drop-downs 中 select，但是一旦在获取初始数据后调用它，如果我想 select 另一个选项，我无法这样做。 drop-downs 不工作。下面是我的 table 的示例：

<table>
<thead>
<tr>
<th>Vehicle</th>
<th>Design</th>
.
.
</tr>
<tr>
<th class="sorter-false"><select multiple="multiple" name="vehicle"><options here></select></th>
<th class="sorter-false"><select multiple="multiple" name="design"><options here></select></th>
.
.
</tr>
</thead>
<tbody>
<tr><td></td><td></td>....</tr>
<tr><td></td><td></td>....</tr>
--
</tbody>
</table>

在 js 中，我尝试包含 sorter:select，如下所示

$("#table").tablesorter({
                              theme : 'blue',
                              headers: {
                                    0: { sorter: "select" }

                                }
                          })

在标签中，我包含了以下文件

<script src="resources/js/bootstrap-multiselect.js"></script>
<script src="resources/js/jquery.tablesorter.js"></script>
<script src="resources/js/parser-input-select.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap-multiselect.css">
<link rel="stylesheet" type="text/css" href="resources/css/tablesorter-styles.css"> /*Changed name */

我想禁用由 select drop-downs 组成的第二 header 行的排序，并仅基于第一 header 行进行排序。单击 select 后，我想查看下拉菜单。请让我知道哪里出错了。

Answer 1

对于第二行，添加 "tablesorter-ignoreRow" 的 class 名称（由 cssIgnoreRow option 设置）。

<tr class="tablesorter-ignoreRow">...</tr>

您甚至不需要在每个单元格中添加 class="sorter-false"。

Here is a demo in the documentation using this class.

具有两个 header 行和第二 header 行中的多选下拉列表的表格排序器

tablesorter with two header rows and multiselect dropdown in the second header row

tablesorter

bootstrap-multiselect