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!

robert.odegard01

Is there any updated on if this is being flagged as a bug as it used to work fine but does not anymore after upgrading from 1.13.6 to datatables 2.1.7. anywhere I use orderData I now have to manually go in and add this extra code which will be a pain as I have to manually figure out all the columns classNames to copy from/to

allan

What's your use case for having the arrows on the hidden columns? Is it the same as above with orderData?

At the moment I don't think it is a bug, but if there is a general use case for them, then I can look at adding it back.

Allan

robert.odegard01

The issue isn't that I need the arrow to show on the hidden column, I need it to show on the visible column the user clicks to sort on but it isn't showing.

My use case is I have a visible column that is a string with format 'ABCnnn' where 'ABC' is a fixed string for all record and 'nnn' is an incremental number starting from 1 but it is not formatted as '0001' simple increments 1, 2, 3...100, 101, etc but they needs to be sorted numerically not alphabetically by the numbers. So we have a second hidden column that is the numeric portion as an integer so when the user sorts column 'A' they are sorting on column 'B's value. However, column A is not showing sort order to the user.

I am using "columns" not "columnDefs" for defining my columns in the table.

robert.odegard01

Here is an example of the issue, using your example above but removing your extra code and hiding column 1 which is the sorted column. when you sort on the Name column you don't get any sort direction displaying.

https://live.datatables.net/jikunori/24/

kthorngren

Possibly you can use the Natural sorting plugin instead of columns.orderData with a hidden column to sort the column.

Kevin

robert.odegard01

This is just one example of where I have used orderData, there are several other situations that this plugin would not work. My expectation would be if the user sorts on one column, even thought it is using the data from another to sort, it would show the sort direction on the column clicked.

kthorngren

There is a behavior change from Datatables 1 to 2 with this. With 1.13.10 the sorting arrows are displayed in the column using orderData:
https://live.datatables.net/honuzolu/1/edit

But not with 2:
https://live.datatables.net/yiqeqama/1/edit

I would agree that if the column is sorted it should show the proper arrows otherwise it could be confusing to the user. @allan will need to decide.

Kevin

robert.odegard01

I have found a simpler work-around that using drawCallback, that for me works...if you add the column being clicked in the orderData at the end it displays the sort arrows properly.

e.g. orderData[1,2] where 1 is the hidden column. Of course this only works if column 1 does all the sorting and column 2 adds no additional affect on the sort...