Column Reordering Resets on New Column

jsosa

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.

Thanks!

kthorngren

Your test case isn't running properly. You are getting an error in the browser's console. The error is because you added the Test column but there is no data for the column.

Ordering saves, but resets when I edit and add a new 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 or destroy()) the Datatable and reinitialize with the updated columns.

Kevin

jsosa

I updated the example, just remove that col header:
http://live.datatables.net/vidiyabo/3/edit

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.

kthorngren

Sounds like you are using stateSave and 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 statSaveParams and stateLoadParams to 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.

Kevin

jsosa

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?

kthorngren

The stateLoadParams has two parameters, the second is data. It contains all of the data saved including colReorder if its being used. See this example:
http://live.datatables.net/vidiyabo/5/edit

Reorder some columns and click Run with JS. You will see the colReorder object 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 colReorder object and order in stateLoadParams. However since the number of columns is changed the column order is set to default.

stateLoadParams is not the place to reapply the column order as I suggested above. Instead store the data.ColReorder array in a global variable. Then in initComplete check to see if the ColReorder array length is different than the number of configured columns using columns() with count().

If they are different then you will need to code how to apply the ColReorder. The test case simply concats [5] 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.

Kevin

jsosa

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:

          var api = this.api();

          if (ColReorder.length && ColReorder.length < api.columns().count()) {
            let colDiff = api.columns().count() - ColReorder.length;

            for (let i = 1; i <= colDiff; i++) {
              ColReorder = ColReorder.concat([columnDefs.length - i]);
            }

            this.api().colReorder.order(ColReorder);
          }
          else if (ColReorder.length && ColReorder.length > api.columns().count()) {
            let colDiff = ColReorder.length - api.columns().count();
            for (let i = 1; i <= colDiff; i++) {
              ColReorder.pop();
            }

            this.api().colReorder.order(ColReorder);
          }

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.

kthorngren

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 stateSaveParams. When stateLoadParams runs 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.

Kevin