Alternatve to colReorder

trongart

I would like the column order to be [1,0] at load/initialisation without the use of colReorder (as it has compatibility problems with stateRestore).

Test case: https://live.datatables.net/zevuqifi/1/edit
The "columns" defintion must stay the same as in the test case.

Is this possible? Are there alterantives to colReorder?

kthorngren

The obvious answer is to order the columns in the order you want. But it seems there is more to this question. Please describe the problem you are trying to solve. Are you wanting to change the order of the columns at a later time?

Kevin

trongart

@kthorngren I have more than 54 columns and lots of code that directly affect the columns by className so that I cannot change the order inside "columns". I need to add a column 55, but it must come after column 10 and not after 54. The only way I found to do this is by colReorder, but colReorder does not work with stateRestore. The ideal solution is to load the table with the normal order from 0 to 55 and then to reorder it somehow without colReorder.

allan

I have more than 54 columns and lots of code that directly affect the columns by className so that I cannot change the order inside "columns"

I'm not clear on why the number of columns makes a difference, and if the code is based on class names, then just changing the order of them, shouldn't matter since their class names would move with them.

Perhaps you can link to a test case that demonstrates the issue?

Allan

trongart

Hi @allan ! Here are 2 test cases to show the issue:

Table 1 (Column Salary is the last column):
https://live.datatables.net/zomutaha/1/edit

There are conditions that change the background to green for Extn.
.data3 in css applies the text color red to Extn.
start_date column is hidden

Table 2 - Salary column moved after Office column in the "columns":
https://live.datatables.net/jetirafo/1/edit

Problems in Table 2:
Extn background conditions from table 1 apply to Salary column in table
2 instead of Extn.
.data3 in css now applies the text color red to Salary instead of Extn
Instead of start_date, the Extn column is hidden

I think the main issue is that targets uses an index number instead of object number such as:

---

"targets": [ 0 ]
{
targets: [4],
visible: false
}

---

But I am not sure how to use object names uch as "office", "extn" etc. within targets and if this is possible?

trongart

What would be the correct syntax to use object names? For example:

"columnDefs": [
          { className: "data3", "targets": [ "extn" ] },
]

instead of

"columnDefs": [
          { className: "data3", "targets": [3] },
]

kthorngren

The columnDefs.targets docs show all the options. Basically you can use column index numbers or classname assigned to the th. The general idea of columnDefs is to build configs that are applied to multiple columns. My suggestion would be to move the individual columnDefs to the columns configs. This way inserting, moving or removing columns won't affect the other columns, ie, you won't need to keep up with columndefs.targets.

Kevin

trongart

@kthorngren Appreciate your feedback! I think this could work. I moved the className into colums in this test case, but how would I also include the render functions into columns?

kthorngren

Just copy like you did the className:
https://live.datatables.net/yubosahe/1/edit

Kevin

trongart

@kthorngren Fantastic! Thank you!