Multi column sorting in datatables

问题

I have a table and it has 8 columns. Suppose their headers viz 'A', 'B'..... 'H'.

I want to apply multi-column sorting like:

Default view: Case1: If user clicks on 'A' then sorts the column as 'A' (desc) - > 'B' (asc) - >'E' (asc) - >.... - > 'H' (asc)

And if user again clicks on 'A' then nothing should happen.

Case 2: If user clicks on 'E' then sorts the column as 'E' (asc) - > 'A' (desc) - > 'B' (asc) - >'F' (asc) - >.... - > 'H' (asc)

And if user again clicks on 'E' then nothing should happen.

Case 3: If user clicks on 'F' then sorts the column as 'F' (asc) - >'A' (desc) - > 'B' (asc) - >'E' (asc) - >.... - > 'H' (asc)

And if user again clicks on 'F' then nothing should happen.

please look at the code what I have done

$(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": ""
    },

Output:

What I want?:

Begin Time should be in 'asc' order but a user can't apply to sort using begin time.
Default view: I am indicating using column index instead of column's name [ [0, 'desc'], [1, 'asc'], [4, 'asc'], [5, 'asc'],[6, 'asc'],[7, 'asc'] ]

First 0 index column sorts then 1 index and so on

If user clicks on 4th index then [[4, 'asc'],[0, 'desc'], [1, 'asc'], [5, 'asc'],[6, 'asc'],[7, 'asc']]
5th index, [[5, 'asc'],[0, 'desc'], [1, 'asc'],[4, 'asc'] ,[6, 'asc'],[7, 'asc']] , and same for 6th and 7th index

But the columns in the output image are not correctly sorts.

Note: Brief description at https://s.docworkspace.com/docs/3Hj58r9qB Please help me out as it's my first day on data tables.

Thanks in advance

回答1:

I had found the solution:

$(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]}   
    ] 
 }); });

来源：https://stackoverflow.com/questions/61121886/multi-column-sorting-in-datatables

标签

datatables

jquery-plugins