数据表中的多列排序

问题描述 投票:0回答:1

我有一个表,它有8列。假设它们的标题是'A','B'......'H'。'H'.

我想应用多列排序,如:"A","B"...... "H"。

默认视图: Case1: 如果用户点击'A',然后将该列排序为'A'(降)- > 'B'(升)- > 'E'(升)- >......。- > 'H' (升)

如果用户再次点击'A',则不会发生任何事情。

案例2:如果用户点击'E',然后将该列排序为'E'(升)->'A'(降)->'B'(升)->'F'(升)->......。- >'H'(升)- >'B'(升)- >'F'(升)- >....

如果用户再次点击'E',则不会发生任何事情。

案例3:如果用户点击'F',然后将该列排序为'F'(升)->'A'(降)->'B'(升)->'E'(升)->...。- >'H'(升)- >'B'(升)- >'E'(升)- >....

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

输出。enter image description here

我想要什么?

  1. 开始时间应该是升序的 但用户不能用开始时间来排序。
  2. 默认视图。我表示使用列索引而不是列名[ [0, 'desc'], [1, 'asc'], [4, 'asc'], [5, 'asc'],[6, 'asc'],[7, 'asc'] ] 。

先对0指数列进行排序,然后对1指数进行排序,以此类推

  1. 如果用户点击第四个索引,那么[[4,'上升'],[0,'下降'],[1,'上升'],[5,'上升'],[6,'上升'],[7,'上升']]。
  2. 第5个指数,[[5,'上升'],[0,'下降'],[1,'上升'],[4,'上升'],[6,'上升'],[7,'上升']],第6和第7个指数相同。

但输出图像中的列没有正确排序。

注意事项 简要说明在 https:/s.docworkspace.comdocs3Hj58r9qB请大家帮帮我,因为我是第一天接触数据表。

先谢谢你

datatables jquery-plugins
1个回答
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]}   
    ] 
 }); });
© www.soinside.com 2019 - 2024. All rights reserved.