我在我的 UI 中使用 jQuery tablesorter。我有一个场景,我有一个包含 2 行标题的表。一个主标题和一个副标题。我想在副标题中添加排序。我该怎么做。
这是我的代码的样子,
<table class="grid" id="gr1" cellspacing="0" width="100%" border="1">
<tr bgcolor="#FF0000"><th class="NOBORDER" colspan="1"> </th>
<th class="NOBORDER" colspan="3">A</th>
<th class="NOBORDER" colspan="3">B</th>
<th class="NOBORDER" colspan="3">C</th>
<th class="NOBORDER" colspan="3">D</th>
<th class="NOBORDER" colspan="3">E</th>
<th class="NOBORDER" colspan="3">F</th>
</tr>
<tr>
<th>Group</th>
<th>A1</th>
<th>A2</th>
<th>A3</th>
<th>B1</th>
<th>B2</th>
<th>B3</th>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>D1</th>
<th>D2</th>
<th>D3</th>
<th>E1</th>
<th>E2</th>
<th>E3</th>
<th>F1</th>
<th>F2</th>
<th>F3</th>
</tr>
在此表中,我想对第 2 行中的组列进行排序。我该怎么做?
最佳答案
表格 ( working demo ) 存在三个问题:
tablesorter 需要一个带有
<thead>
的表格和<tbody>
在它甚至会初始化之前。示例中没有显示完整的表格,所以我只能假设<tbody>
也可能会丢失。<table class="grid tablesorter" id="gr1" cellspacing="0" width="100%" border="1"> <thead> <tr bgcolor="#FF0000"> <th class="NOBORDER" colspan="1"> </th> <th class="NOBORDER" colspan="3">A</th> ... <th class="NOBORDER" colspan="3">F</th> </tr> <tr> <th>Group</th> <th>A1</th> <th>A2</th> <th>A3</th> <th>B1</th> ... <th>F3</th> </tr> </thead> <tbody> <tr>...</tr> </tbody> </table>
原版tablesorter需要
"tablesorter"
在应用任何样式之前要添加到表中的类名。原始版本似乎也不适用于
<thead>
中的多个功能行.因此,禁用顶行中的排序以使排序在第三列中正常工作(第四列,但在每组中为第三列)。试试这个初始化代码:$('table').tablesorter({ headers : { 0 : { sorter: false }, 1 : { sorter: false }, 2 : { sorter: false }, 3 : { sorter: false }, 4 : { sorter: false }, 5 : { sorter: false }, 6 : { sorter: false } } });
关于javascript - 子标题中的 jQuery 表格排序器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15552272/