Column Reordering Resets on New Column
Column Reordering Resets on New Column
Hello, I'm using the colreorder extension to let users reorder their columns. When a new column is added to the table, or a column is removed, people's ordering of columns resets to the default table order.
Is there a way to make it so that a user's own column ordering does not reset if I add a new column at a later point?
Here's a basic example: http://live.datatables.net/vidiyabo/1/edit
Ordering saves, but resets when I edit and add a new column.
This question has an accepted answers - jump to answer
Your test case isn't running properly. You are getting an error in the browser's console. The error is because you added the
Testcolumn but there is no data for the column.
How are you doing this? Datatables doesn't support dynamically adding columns. In order to change add or remove columns from the table you will need to destroy (using
destroy()) the Datatable and reinitialize with the updated columns.
I updated the example, just remove that col header:
When you refresh the page, it continues to use the ordering you specified. If I edit the HTML on my site to add a new column and the user refreshes, their ordering will be reset. I want to be able to edit the HTML as needed, and keep the user's ordering as they originally specified it when they return/refresh the page.
Going further, my site uses ajax to pull in the data, and uses 'columns', 'columndefs', and HTML-specified theaders and tfooters. If the data, 'columns', 'columndefs' and theaders and tfooters update to add a brand new column, and the user refreshes or comes back to the site, the ordering is unfortunately reset.
Sounds like you are using
stateSaveand when you change the number of columns the default column order is applied when the Datatable is initialized. I believe this is due to an inconsistency in the stateSaved columns and the columns applied at initialization. Datatables doesn't know how to reconcile this so it goes with the initialization order.
If this describes your issue then you can keep track of the colReorder changes using
stateLoadParamsto apply the column order appropriately when the columns change.
If this doesn't help then please provide a test case showing the issue so we can help debug.
I do have stateSaveParams and stateLoadParams, along with a stateSaveCallback and stateLoadCallback to store settings in a database. Should colReorder be explicitly saved in stateSaveParams and loaded in stateLoadParams? How would I do that?
stateLoadParamshas two parameters, the second is
data. It contains all of the data saved including
colReorderif its being used. See this example:
Reorder some columns and click Run with JS. You will see the
colReorderobject contains the current order and the order is applied to the columns. Uncomment the last column and click Run with JS. You will see the same
colReorderobject and order in
stateLoadParams. However since the number of columns is changed the column order is set to default.
stateLoadParamsis not the place to reapply the column order as I suggested above. Instead store the
data.ColReorderarray in a global variable. Then in
initCompletecheck to see if the ColReorder array length is different than the number of configured columns using
If they are different then you will need to code how to apply the ColReorder. The test case simply concats
to the array when uncommenting the last row. This won't work if removing the number of columns or if adding more than one columns or if columns are added in the middle. You will need to write the code to handle re-applying the ColReorder based on how you are changing the columns.
I think that works, thank you! I set up columnDefs, so I used that for the count. I also changed it to <, and then added a > section to just pop off the last one if a column gets removed.
In my initComplete:
Is there a way to keep all of the ordering in tact if removing a column from the middle? My colDefs set targets, so the pop above will reset the last column if a column from the middle goes away. But if I have 10 columns and remove column #5, it'd be nice keep the positioning of everything before and after it, and just remove that one from view.
That is something you will need to keep track of. If you remove column 5 of 10 columns how will you know its column 5 when the page is reloaded?
One option might be to save your column definition with
stateLoadParamsruns you can compare the saved columns with the current to determine the difference then adjust the column order appropriately.
Its not clear how you are defining the columns. Nor how your solution might keep track of the column changes. Basically you will need to do more than just comparing array lengths if you want to insert or remove columns in the middle.