DataTable Predefined Column Reordering on Serverside Not Working

radiations3

I am using Predefined Column Reordering on a server side datatable. When the datatable loads the very first time it works just fine but when I apply the pagination, sort or search then it maps the data into wrong columns and doesnot follow the Predefined Column Reordering. On table load I am hiding few columns as well. Please let me know how to fix this so on pagination etc the predefined column order should be followed as well.

$('#datatable').DataTable({

  "processing": true,
  "serverSide": true,
  colReorder: true,
  "ajax": 'serverside.php',

  "order": [
    [11, "desc"]
  ],
  colReorder: {
    order: [0, 1, 2, 3, 7, 8, 4, 5, 6, 20, 21, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
  },
  "columnDefs": [{
    "targets": [9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
    "visible": false
  }]
})

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

radiations3

Colin after adding Object data source via Columns[ ] its started to work on pagination, sorting and searching but now another weird issue happened. Its not working on the datatable when it initializes the first time. So in order to fix this, is it possible that I apply the Columns[ ] option to data table after it gets initialized? Or what do you think is causing the issue?

tangerine

Please post a link to a test case as Colin requested.

radiations3

Colin and Tangerine, I have made a test scenario here: https://jsbin.com/ciheragayi/1/edit?html,css,js,output

Please use the sample data in ajax at your end. As on above due to CORS policy the ajax seems to be not running. But you can see the code I am using and let me know the possible fix for it?

Thanks

radiations3

Please see below image and you can see from above code the columns are mapped in wrong places.

colin

The table isn't loading correctly due to the Ajax call. We really need to see the failure on this one to be able to diagnose it. The code looks fine (though you need to remove the first colReorder).

Colin

radiations3

Colin, After removing the first colreorder it didn't effect anything. The strange issue I am having is the moment I use searching, sorting or pagination. The very same code starts to map the data in right places. I am using following hack temporarily to counter this problem on init. But if you can give me a solid fix for this it will be a huge help for me.

$('#datatable').DataTable().order([0, 'asc']).draw();

radiations3

One quick question like following:

$('#datatable').DataTable().order([0, 'asc']).draw();

Can we also give externally following option to datatable as well? If so how?

columns: [
            { data: "0" },
            { data: "1" },
            { data: "2" }
]