When using orderData of another column the sort icons do not update for both?

When using orderData of another column the sort icons do not update for both?

mihomesmihomes Posts: 150Questions: 19Answers: 0

I searched around a bit, but didn't quite see anything similar and hoping there is an easy solution to this other than 'watching' the changes on both columns to update the other when one is changed.

I have these two columns. One is basically a replication of the other just showing the data in a different way - one is an image link and the other a text link. One is hidden and the other is visible. I have a button that I use as a 'toggler' which will reverse the visibility of these columns - all image links shown, click the toggle button, now all text links are shown, and vice versa.

It works as it should, but I noticed that even though I am using the same column to sort with it doesn't update the sorting icons for BOTH columns. I guess I just assumed it would due to setting orderData. For instance, the 'window_title' column is sorted ascending and its icon is highlighted showing it is ascending, I click the toggle button, the columns switch visibility, and now the 'null' column doesn't show it is sorted ascending (the icon is 'grey' as if it has never been sorted). I can click on its column header to sort the column, which activates its sorting icon, click the toggle again to switch columns, and now that one doesn't have a highlighted sorting icon.

So, I guess what I am asking here is if there is anything in addition to orderData which would keep both of these columns sorted in the same state, regardless of which was changed/clicked, and make sure their sorting icons are updated as well?

{
    "data": null,
    "orderData": [2], //use order data from window title column for sorting
    "visible": true,
    "render": function ( data, type, row ) {
        return //show image link using row['window_title']
    }
},      
{
    "data": "window_title",
    "visible": false,
    "render": function ( data, type, row ) {
        return //show text link using data
    }
},

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    There's a lot going on there. We're happy to take a look, but please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Colin

  • mihomesmihomes Posts: 150Questions: 19Answers: 0

    I don't feel there is much at all going on here, but I guess that is a matter of opinion. When I have time to do up a test case I will though.

  • mihomesmihomes Posts: 150Questions: 19Answers: 0

    Test case : live.datatables.net/wivogepu/1/edit

    You can click on 'click to toggle columns' to toggle the visibility of the columns. You will see that the sorting icon is not highlighted after a toggle even though both columns are sorting the exact same data. Maybe this is by design - I am not sure.

    When I toggle the columns I would like the sorting icons to be active and the same on each column. If you are sorting asc and it is highlighted, then toggle columns, the newly shown column should have asc highlighted and vice versa.

    I guess I assumed since both are sorting from the same data that the sorting icons would be mimicked, but it doesn't appear so.

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736
    edited August 2020 Answer ✓

    I don't feel there is much at all going on here, but I guess that is a matter of opinion.

    Thanks for the test case it helps understand the question. It is very obvious and much easier to understand the question than the written description. I admit I passed on responding to the first post as I didn't have time to digest the description. However after seeing the test case re-reading your original post makes perfect sense.

    The sorting icons are used to indicate the columns that are ordered by either clicking on the column(s), the order() API or the order option. Your example is using the default of the first column sorted ascending so it has the sorting arrow. The second column isn't specified to order by any of these operations so it doesn't have the sorting icon. See this example:
    http://live.datatables.net/yovakexo/1/edit

    The example will show the table ordering is always column 0 each time you click the toggle.

    You could use the order API to control this when toggling the columns. Here is an example:
    http://live.datatables.net/wivogepu/2/edit

    I made one change to the rendered data just to verify the columns.orderData config is working :smile:

    Kevin

  • mihomesmihomes Posts: 150Questions: 19Answers: 0

    Nice. This is kind of what I was hoping for and not something that 'watched' the changes. I originally was wondering why you were getting the order from every column, but then realized that is because of multi column sorting. Looks to be just what I needed and what I would say is an easy work around for the problem. I'm without power at the moment due to a storm so I can't add this in, but from looking at the code I don't see an issue. Thanks again and apologies for the original description.

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    I'm without power at the moment due to a storm so I can't add this in, but from looking at the code I don't see an issue. Thanks again and apologies for the original description.

    Hurricane Laura? Hope all is ok. No problem with the original description :smile:

    Kevin

This discussion has been closed.