ColReoder with Statesave with Ajax data source (array)

tutaqq

I've used to supply data in table <tbody> directly and everything worked fine with colreorder and statesave after page reload.
However, due to data size I've switched to Ajax sourced data (array) with headers and column names supplied in <thead>. While it all renders perfectly, and Column reorder executes well on both header and data, after page reload or simple ajax.reload() header state is preserved, but data columns go back in original position. I've read somewhere that I must supply object sourced Ajax data, but before making changes just wanted to verify if this is correct and if there is any other possible workaround? Thank you

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

tutaqq

OK I've tried to simplify the case as much as possible. When columns Name and Gender are swapped, it works fine. However, when you refresh the page headers are preserved, while data not. Same goes with ajax.reload() (not shown in example)
Thank you for your time.

http://tyt.d2sm.com/datatables.html

colin

Thanks for that test case. The problem is because you're using an array of data - so when it's reloaded, it's just put back into the columns in the order of the array.

Arguably, DataTables should handle that, but the best fix would be to use a JSON object, like this example here. When the data is marked for a specific column, it's loaded correctly.

Colin

tutaqq

OK just wanted to confirm that before making changes to my code. Thank you very much!