【发布时间】:2012-06-01 07:14:34
【问题描述】:
我需要在帐户交易表上设置多列排序。我决定使用 jQuery DataTables。每当我单击列标题对该列(例如列 x)进行排序时,我希望它按列 3 对列 x 中的任何匹配项进行排序。如果我点击第 3 列,那么当第 3 列中有匹配项时,它应该按第 0 列排序。
我见过fnSortListener 和fnSort,看起来我可以通过将它们附加到每一列来实现我的目标……但这似乎真的是多余的,因为每一列都需要对列进行二次排序3,第 3 列除外。
那么,有没有办法告诉 DataTables 总是对第 3 列进行二次排序,然后为第 3 列指定异常?
感谢任何帮助。我对这个插件很陌生。谢谢!
编辑
这就是我最终要解决的问题。第一个二维数组表示第一次点击时如何排序,第二个二维数组表示第二次点击时如何排序。
var Sorter = function($dataTable) {
return {
bindMultiSort: function(headerSelector, firstOrderTuples, secondOrderTuples) {
var order = 0;
this.removeSorting(headerSelector).click(function() {
if (order === 0) {
$dataTable.fnSort(firstOrderTuples);
order = 1;
} else {
$dataTable.fnSort(secondOrderTuples);
order = 0;
}
});
},
removeSorting: function(headerSelector) {
var $header = $(headerSelector);
$header.unbind('click');
return $header;
}
};
};
function attachSecondarySorting($transactionsTable) {
var sorter = new Sorter($transactionsTable);
sorter.bindMultiSort('#posted', [[POSTED_DATE_COL, "asc"], [DESCRIPTION_COL, "asc"]], [[POSTED_DATE_COL, "desc"], [DESCRIPTION_COL, "asc"]]);
sorter.bindMultiSort('#received', [[RECEIVED_DATE_COL, 'asc'], [DESCRIPTION_COL, 'asc']], [[RECEIVED_DATE_COL, 'desc'], [DESCRIPTION_COL, 'asc']]);
sorter.bindMultiSort('#category', [[TRANSACTION_TYPE_COL, 'asc'], [POSTED_DATE_COL, 'desc'], [DESCRIPTION_COL, 'asc']], [[TRANSACTION_TYPE_COL, 'desc'],
sorter.bindMultiSort('#description', [[DESCRIPTION_COL, 'asc'], [POSTED_DATE_COL, 'desc']], [[DESCRIPTION_COL, 'desc'], [POSTED_DATE_COL, 'desc']]);
sorter.bindMultiSort('#moneyIn', [[MONEY_IN_COL, 'asc'], [DESCRIPTION_COL, 'asc']], [[MONEY_IN_COL, 'desc'], [DESCRIPTION_COL, 'asc']]);
sorter.bindMultiSort('#moneyOut', [[MONEY_OUT_COL, 'asc'], [DESCRIPTION_COL, 'asc']], [[MONEY_OUT_COL, 'desc'], [DESCRIPTION_COL, 'asc']]);
}
【问题讨论】:
-
当您说要按另一列中有匹配项的一列排序时,您能澄清一下您的意思吗?当单击的列中没有匹配项时,数据会发生什么情况?
-
或者你只是说点击 x 列会先按 x 列再按第 3 列排序,除了第 3 列先按第 3 列再按第 0 列排序?
-
另一种方法是让用户控制二级排序。如果他们点击两个不同的列,第一个将是次要的,第二个将是主要的 - 只要您使用 stable 排序。强制使用辅助密钥会阻止此操作。
-
是的,业务需求 ;-)
标签: jquery sorting datatables multiple-columns