Question

如何为两个标题行提供相同的排序功能？目前我可以按top（＆＃34; bSortCellsTop＆＃34;：true）或底行排序，但不能同时排序。

<table id="example" border="1">
<thead>
    <tr><th></th><th></th><th></th><th>sort 2015</th><th>sort 2016</th></tr>
    <tr><th>sort 2012</th><th>sort 2013</th><th>sort 2014</th><th></th><th>  </th></tr>
</thead>
<tbody>
    <tr><td>23</td><td>11</td><td>900</td><td>100</td><td>2358</td></tr>
    <tr><td>10</td><td>45</td><td>410</td><td>1</td><td>531</td></tr>
    <tr><td>64</td><td>126</td><td>6310</td><td>85</td><td>7</td></tr>
    <tr><td>86</td><td>524</td><td>520</td><td>65</td><td>68</td></tr>
</tbody>
</table>

Answer 1

<强>解

您可以使用以下代码按顶行和底行排序标题。

<强>的JavaScript ：

$('#example').DataTable({
    "orderCellsTop": true
});

$('#example').on('click', 'tr:eq(1) th', function(){
    var index = $(this).parent().find('th').index(this);    
    var cellTop = $(this).closest('thead').find('tr:eq(0) th:eq('+index +')');
    $(cellTop).trigger('click');
});

<强> CSS ：

#example thead th {
   cursor:pointer;
}

请注意，只有当每行中的列数相同时，上述代码才有效。

<强>样本

请参阅this jsFiddle以获取代码和演示。

按两个标题行对Datatable进行排序

1 个答案: