Arrows not working in targeted column ordered from another hidden column

teeeVeee33

Hi Everyone. I am using a hidden column to sort data in a visible column. I use the columnDefs to accomplish this:

    columnDefs: [
        { 
            targets: [0],
            orderData: [1]
        }, 
        {
            targets: [1, 2],
            searchable: true,
            visible: false
        }, ...

The reason for this is that the data in the visible column (Column 0) is a string with a range combining values from Columns 1 and 2... so I need it to sort on the beginning range number, which is Column 1. And it all works great! Column 0 shows the ranges but it sorts on the values in Column1 (which is hidden) which is what I want!

However, now that I have made this change, the sort arrows no longer work on the visible column (Column 0). The arrows appear but when I click it's header to sort, they don't change to the active sort arrows. I think this is likely intended behavior ... but is there any way to set this (perhaps with additional code) where the target column (in this case, Column 0) also has working sort arrow icons that correspond to the target column's sort?

Thanks for any help anyone can provide!

allan

That's a good question! I'm honestly not sure if that should be considered a bug or not... I'll need to think on that.

In the meantime, what you could do is just copy the classes from the hidden header to the visible one on each draw action (drawCallback):

  drawCallback: function () {
    var api = this.api();
    var classes = api.column(1).header().className;
    
    api.column(0).header().className = classes;
  }

Example here: https://live.datatables.net/jikunori/1/edit .

Allan

teeeVeee33

Awesome Allan! That worked like a charm!! So much appreciate your help and hope someone else can benefit from this too!