我正在尝试使用 jQuery 的 DataTable 插件(最新版本)对 2 列进行排序。这样,加载就可以了。
$('#example').dataTable( {
"aaSorting": [ [2,'asc'], [3,'asc'] ],
});
我在点击时对两列进行排序没有什么困难。例如,当用户单击“专辑”时,表不会对 TrackNo 列进行排序。 我的表格如下所示:
-------------------------------------
| Album | TrackNo |
-------------------------------------
| MyAlbum 2010 | 1 out of 12 |
| MyAlbum 2010 | 9 out of 12 |
| MyAlbum 2010 | 10 out of 12 |
| MyAlbum 2010 | 4 out of 12 |
| MyAlbum 2010 | 2 out of 12 |
| MyAlbum 2010 | 12 out of 12 |
-------------------------------------
另一个问题是,当我对“Album”列进行排序时,TrackNo 列按以下顺序排序:1, 10, 12, 2, 4, 9。
我注意到可以更改 DataTable 的排序方式:
jQuery.fn.dataTableExt.oSort['numericstring-case-asc'] = function(x,y) {
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['numericstring-case-desc'] = function(x,y) {
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
我的问题是:如何对 TrackNo 列进行排序,以便它以良好的顺序显示轨道,而不在每个轨道前面添加零? 如何在点击时对 2 列进行排序?
最佳答案
使用以下代码创建满足您要求的 dataTableExt oSort 方法:
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"hybrid-asc": function(x, y) {
if (!isNaN(parseInt(x)) && !isNaN(parseInt(y))) {
x = parseInt(x);
y = parseInt(y);
}
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
},
"hybrid-desc": function(x, y) {
if (!isNaN(parseInt(x)) && !isNaN(parseInt(y))) {
x = parseInt(x);
y = parseInt(y);
}
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
}
});
要控制一个包含两列的数据表列,请禁用第一列的排序功能并向标题添加一个类
HTML:<th class="sortAlbum">Album</th>
运行以下脚本来初始化数据表,设置排序方法,禁用第一列的排序,并使单击第一列标题对第二列进行排序
Js:
$(document).ready(function() {
var dataTableEx = $('#example').dataTable({
"aaSorting": [[1, 'asc']],
"aoColumns": [
{
"bSortable": false},
{
"bSortable": true,
"sType": "hybrid"}]
});
dataTableEx.fnSortListener($('.sortAlbum'), 1);
});
关于jquery - 使用 DataTable 单击单个列的标题时对多列进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14023694/