Multi column sorting in datatables

Question

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

Please edit your question to show your DataTables code. Please also show what you have already tried. Also, is this sufficient for your needs? It will be much simpler to implement than what you describe in your question. — andrewJames
– andrewJames, Commented Apr 9, 2020 at 13:18
Please do not provide your code as a link, wherever possible. Please post formatted text in the question itself. If you think the code is too long to do that, then strip it down to the relevant (working!) parts. See this. Also, when I click on the link you provided, I see this message: This service is not available in your country/region. — andrewJames
– andrewJames, Commented Apr 9, 2020 at 13:33
Thank you for your updates. I recommend you use this feature for multi-sorting, or even just the basic Shift-Click multi-column sorting that you get by default. For dates and times, there are various approaches you can use. The simplest is to use YYYY-MM-DD HH:MM:SS" with a 24-hour notation. If you want a different format, there are various questions and answers already on this site - maybe one of those will help. — andrewJames
– andrewJames, Commented Apr 10, 2020 at 14:52

Amita Yadav · Accepted Answer · 2020-05-08 15:48:08Z

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

answered May 8, 2020 at 15:48

Amita Yadav

459 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multi column sorting in datatables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related