【发布时间】:2020-07-22 02:47:06
【问题描述】:
我有一张桌子,它有 8 列。假设他们的标题即'A','B'.....'H'。
我想应用多列排序,例如:
默认视图:案例1:如果用户点击'A'然后将列排序为'A'(desc)->'B'(asc)->'E'(asc)->....-> “H”(升序)
如果用户再次点击“A”,那么什么都不会发生。
案例2:如果用户点击'E'然后将列排序为'E'(asc)->'A'(desc)->'B'(asc)->'F'(asc)-> .... - > 'H' (asc)
如果用户再次点击“E”,则不会发生任何事情。
案例3:如果用户点击'F'然后将列排序为'F'(asc)->'A'(desc)->'B'(asc)->'E'(asc)-> .... - > 'H' (asc)
如果用户再次点击“F”,那么什么都不会发生。
请看我所做的代码
$(document).ready(function() {
window.history.pushState("object or string", "EPAP|AuctionList", contextPath+"/auctions/auctionlist");
languageList.sEmptyTable = '<spring:message code="auctionlist.emptytable"/>';
auctionTable = $('#datatable').DataTable({
language: languageList,
order: [[0, 'desc']],
columnDefs: [
{targets: 0, orderSequence: ['desc']},
{targets: 1, orderSequence: ['asc']},
{targets: 4, orderSequence: ['asc']},
{targets: 5, orderSequence: ['asc']},
{targets: 6, orderSequence: ['asc']},
{targets: 7, orderSequence: ['asc']},
{type: "datetime-moment",targets: 5}
],
initComplete: function () {
$('#datatable th').on('click', function (event) {
var auctionTable = $('#datatable').DataTable();
var th = $(this).closest('th');
var colIndex = auctionTable.column( th ).index();
console.log(colIndex);
if (colIndex === 0) {
console.log('order col 0 ')
auctionTable.order([[0, 'desc'], [1, 'asc'], [4, 'asc'], [5, 'asc'],[6, 'asc'],[7, 'asc']]).draw();
}else if (colIndex === 4) {
console.log('order col 4 ')
auctionTable.order([[4, 'asc'],[0, 'desc'], [1, 'asc'], [5, 'asc'],[6, 'asc'],[7, 'asc']]).draw();
}else if (colIndex === 5) {
console.log('order col 5 ')
auctionTable.order([[5, 'asc'],[0, 'desc'], [1, 'asc'],[4, 'asc'] ,[6, 'asc'],[7, 'asc']]).draw();
}else if (colIndex === 6) {
console.log('order col6 ')
auctionTable.order([[6, 'asc'],[0, 'desc'], [1, 'asc'], [5, 'asc'],[4, 'asc'],[7, 'asc']]).draw();
}else if (colIndex ===7) {
console.log('order col 7')
auctionTable.order([[7, 'asc'],[0, 'desc'], [1, 'asc'], [5, 'asc'],[4, 'asc'],[6, 'asc']]).draw();
}
});
},
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 2,3,8 ] }
] ,
"ajax": {
"url": (contextPath + "/auctions/dailyAuctionViewList"),
"cache": false,
"asyc":false,
"dataSrc": ""
},
我想要什么?:
- 开始时间应按“升序”顺序,但用户不能申请使用开始时间进行排序。
- 默认视图:我表示使用列索引而不是列名 [ [0, 'desc'], [1, 'asc'], [4, 'asc'], [5, 'asc'],[6, 'asc'],[7, 'asc'] ]
前 0 个索引列排序,然后是 1 个索引,依此类推
- 如果用户点击第 4 个索引,则 [[4, 'asc'],[0, 'desc'], [1, 'asc'], [5, 'asc'],[6, 'asc'] ,[7, 'asc']]
- 第5个索引,[[5, 'asc'],[0, 'desc'], [1, 'asc'],[4, 'asc'] ,[6, 'asc'],[7, 'asc']] 和第 6 和第 7 索引相同
但输出图像中的列排序不正确。
注意:简要说明https://s.docworkspace.com/docs/3Hj58r9qB 请帮帮我,因为这是我在数据表上的第一天。
提前致谢
【问题讨论】:
-
请编辑您的问题以显示您的 DataTables 代码。还请显示您已经尝试过的内容。另外,this 是否足以满足您的需求?实施起来比您在问题中描述的要简单得多。
-
请尽可能不要将您的代码作为链接提供。请在问题本身中发布格式化文本。如果您认为代码太长而无法执行此操作,请将其剥离到相关(工作!)部分。见this。此外,当我单击您提供的链接时,我会看到以下消息:此服务在您的国家/地区不可用。
-
更新了问题,现在请帮帮我
-
感谢您的更新。我建议您使用this feature 进行多排序,甚至只是默认情况下获得的基本 Shift-Click 多列排序。对于日期和时间,您可以使用多种方法。最简单的方法是使用带有 24 小时表示法的 YYYY-MM-DD HH:MM:SS"。如果您想要不同的格式,本网站上已有各种问题和答案 - 也许其中一个会有所帮助。跨度>
-
试过这个功能,但没有用