Why order array shows different values than array[0][0], array[0][1].

dobrzyc

Why the values are different?
let tableOrder = $('#id_main_table').DataTable().order();

then
tableOrder[0][0]
tableOrder[0][1]

For example:
console.log(tableOrder) shows: [5, 'asc',...]
console.log(tableOrder[0][0]) shows 32
console.log(tableOrder[0][1]) shows ''

What is going on? Is this an error?

I'm using dataTables 2.0.3, FixedHeader 4.0.1, Jquery 3.7.1 and Bootstrap 5.3.3

allan

No idea! I've just tried it here and it works as expected. Perhaps you can update the test case to show the issue please?

Allan

dobrzyc

My code:

$("span[class='dt-column-order'],span[class='dt-column-title']").on( "click", function() {
var order = $('#id_main_table').DataTable().order();
console.log(order);
console.log(order[0][0]);
console.log(order[0][1]);
});

Thank you.

kthorngren

The code Allan used in his test case is the same as the code you posted twice. What Allan is asking for is a running test case showing the issue. Debugging just your code snippet is impossible. Please provide a link to a test case that shows the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

allan

If you could update the test case to show the issue please, that would let me see the problem and help resolve it.

Allan

dobrzyc

Sorry, but I don't know how to do it.

allan

I don't know how to see the issue you reported, since the example I provided appears to work just fine.

Please link to a page showing the issue so I can offer some help.

Allan

kthorngren

I built a test case for you with FixedHeader, etc. Used the [Download Builder]https://datatables.net/download/index) to get the proper library files and pasted them into the HTML tab, replacing the existing script and link tags:
https://live.datatables.net/xusuviye/2/edit

It includes your click event. Here is the result:

There is a slight delay between clicking the header and resorting the table. The code in the click event executes before sorting is completed. I added console.log(JSON.stringify( order )); to the second line of output. This shows the value at the time the code is executed. What you see in the first line is the change to the order object after the output. This is behavior from the browser.

I think what you want is to use the order event. Updated the test case using the order event:
https://live.datatables.net/xudofeqe/1/edit

I believe this is the behavior you are after.

Kevin

allan

A click on the header uses a small setTimeout to allow the processing indicator to show. That might well be what you are seeing since your own click listener isn't accounting for that.

The issue is that the values inside the object are updated, but the scalars shown on the console can't ben updated and are written synchronously.

I think Kevin has hit upon exactly what is happening (as usual - nice one Kevin!).

Allan