ColumnControl: issue with state and reorder

timb72

I need to spend some time putting a test together, but I think there is a potential bug with the state object and ColumnControl.

I'm passing the following $('#table').DataTable().state() as an argument called state to a function that manipulates the data before an ajax call (via preXhr)

For each item of the state.columnControl object there is either a searchInput or searchList with their respective properties and all works fine on initial render.

However, I have 'reorder' set on each column of my table, and when I drag a column to a new position and then do another ajax call (triggered by using any ColumnControl search) it seems that the state.ColumnControl object does not respect the changed column position and gets confused?

Say that the column I want to reorder is a searchList, and I move it to a column position currently held by a column that is a searchInput - it seems to "combine" the searchList with the searchInput or the new column position, and the index of the column that it was moved from disappears?

I know the above may sound a bit garbled, but just wondered if anyone has experienced similar with the state object and ColumnControl!?

Tim

allan

Hi Tim,

Column reordering certainly adds extra complexity to the state handling, so it is possible I've missed something. I wasn't aware of any issues, but I might just have not encountered them yet. If you are able to provide a test case showing the issue, that would be really useful.

Thanks,
Allan

timb72

So, I've found it a bit tricky to put a test together, but I hope you can see this test page

https://www.classic-asp.co.uk/X3BF0z6QvJ/datatables/default.asp

In the console I've output the objects state.columns and state.columnControl

Using preXhr, I'm saving the state and then iterating those objects to send the search values via Ajax - as I know that server side processing and columnControl has not yet been implemented, so this is a workaround (I've had help previously on here regarding this)

For ColB, if you select the first item in the searchList an Ajax request is fired, and you can observe the objects in the console, and all is ok.

state.columnControl (index: 1) :
{
"searchList": [
"Test One"
]
}

If you then drag ColB so that it becomes the first column, before ColA, and then select the second item from the searchList that fires the ajax again, and observer the object in the console,

state.columnControl (index 0) :
{
"searchList": [
"Test One",
"Test Two"
],
"searchInput": {
"logic": "contains",
"type": "text",
"value": ""
}
}

You can see that it has retained the "searchInput" of the original ColA - and ColA, which should now be index 1, is no longer present in the state.columnControl object - that object now is 0, 2, 3, 4.

Hope the above makes sense? Also ignore the fact that the ajax and data returned doesn't actually work, I just wanted to demonstrate what happens with the state object when a column is moved.

Tim

timb72

Hi @allan don't suppose you've had a chance to look at this issue?

allan

Apologies no. I was going to try and dig into it last night, but time got away from me. I'll try to do it this afternoon, but can't promise. Sorry. It is on my radar to look into it though!

Allan

timb72

Cheers @Allan - really appreciate any time you can give.

Tim