jQuery数据表中的列排序 [英] Column sorting in jQuery datatables
问题描述
有两种方法可以根据 datatables
版本。
编辑数据表版本1.9以下
你需要使用 fnHeaderCallback
。使用此回调,您可以编辑表头中的每个 th
元素。
我为您创建了一个工作示例。
LIVE: http://live.datatables.net/oduzov
代码: http://live.datatables.net/oduzov / edit#javascript,html
这里是代码(打开代码段查看代码):
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< script src =http://legacy.datatables.net /release-datatables/media/js/jquery.dataTables.js\"></script><table id =exampleclass =displaywidth =100%> < thead> < tr> < th>名称< / th> < th>位置< < th> Office< / th> < th>年龄< / th> < th>开始日期< / th> < th>工资< / th> < / tr> < / thead> < tfoot> < tr> < th>名称< / th> < th>位置< < th> Office< / th> < th>年龄< / th> < th>开始日期< / th> < th>工资< / th> < / tr> < / tfoot> < tbody> < tr> < td> Tiger Nixon< / td> < td> System Architect< / td> < td>爱丁堡< / td> < td> 61< / td> < td> 2011/04/25< / td> < td> $ 3,120< / td> < / tr> < tr> < td> Garrett Winters< / td> < td> Director< / td> < td>爱丁堡< / td> < td> 63< / td> < td> 2011/07/25< / td> < td> $ 5,300< / td> < / tr> < / tbody>< / table>
1.10和更新的
回调有一个新的名字,它只是 headerCallback
。其他一切都是一样的,所以使用新的回调来实现传统的api。
I have gone through the column sorting in jQuery datatable plugin and the various ways of controlling it.. I have a query is it possible to control sorting in such a way that clicking on upper arrow icon will do sorting in ascending order & down arrow icon will do sorting in descending order??
There is two way of doing that, depending on datatables
version.
EDIT for Datatables version 1.9 or less
You need to use fnHeaderCallback
. With this callback you can edit every th
element in table header.
I have create a working example for you.
LIVE : http://live.datatables.net/oduzov
CODE : http://live.datatables.net/oduzov/edit#javascript,html
Here is code behind that (open snippet to see the code) :
$(document).ready(function($) {
var table = $('#example').dataTable({
"fnHeaderCallback": function(nHead, aData, iStart, iEnd, aiDisplay) {
// do this only once
if ($(nHead).children("th").children("button").length === 0) {
// button asc, but you can put img or something else insted
var ascButton = $(document.createElement("button"))
.text("asc");
var descButton = $(document.createElement("button"))
.text("desc"); //
ascButton.click(function(event) {
var thElement = $(this).parent("th"); // parent TH element
var columnIndex = thElement.parent().children("th").index(thElement); // index of parent TH element in header
table.fnSort([
[columnIndex, 'asc']
]); // sort call
return false;
});
descButton.click(function(event) {
var thElement = $(this).parent("th");
var columnIndex = thElement.parent().children("th").index(thElement);
table.fnSort([
[columnIndex, 'desc']
]);
return false;
});
$(nHead).children("th").append(ascButton, descButton);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://legacy.datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
</tbody>
</table>
For Datatables version 1.10 and newer
callback have a new name, it's just headerCallback
. Everything else is the same, so use new callback insted of legacy api.
这篇关于jQuery数据表中的列排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!