javascript - 按两个标题行对数据表进行排序

Question

如何为两个标题行提供相同的排序功能？目前，我可以按顶部(“bSortCellsTop”:true)或底部行排序，但不能同时按两者排序。

参见JSFiddle

<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

SOLUTION

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

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;
}

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

DEMO

参见this jsFiddle用于代码和演示。