数据表中的多列排序

Question

我有一个 table，它有 8 列。假设他们的 headers 即 'A', 'B'..... 'H'.

我想像这样应用 multi-column 排序：

默认视图：案例 1：如果用户单击 'A'，则将列排序为 'A'（降序）-> 'B'（升序）->'E'（ asc) - >.... - > 'H' (asc)

如果用户再次点击 'A' 则什么也不会发生。

情况 2：如果用户单击 'E'，则将列排序为 'E'（升序）-> 'A'（降序）-> 'B'（升序） ->'F'（升序）->....->'H'（升序）

如果用户再次点击 'E' 那么什么也不会发生。

情况 3：如果用户单击 'F'，则将列排序为 'F'（升序）->'A'（降序）->'B'（升序） ->'E'（升序）->....->'H'（升序）

如果用户再次点击 '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": ""
    },

输出：

我想要什么？：

开始时间应该按'asc'排序，但用户不能申请使用开始时间排序。
默认视图：我表示使用列索引而不是列名 [[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 请帮助我，因为这是我第一天处理数据 tables。

提前致谢

Answer 1

我找到了解决方案：

$(document).ready(function() {

  var auctionTable = $('#datatable').DataTable({
    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']}, 
        {orderable: false, targets:[1,2,3,8]}   
    ] 
 }); });

数据表中的多列排序

Multi column sorting in datatables

jquery-plugins

datatables