Sort arrow active based on order

Sort arrow active based on order

ArielSAdamsNASAArielSAdamsNASA Posts: 105Questions: 15Answers: 0

Link to test case: http://live.datatables.net/riyejume/6/edit
Description of problem: I am ordering the rows based on the date column and want this to be obvious to the user. To make it obvious, I want the sort arrow (descending) to be active or blue on default and change when another sort arrow is selected.

This question has an accepted answers - jump to answer

Answers

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

    The sorting arrows change to reflect the table's sorting. One problem is you are loading both jquery.dataTables.min.css and dataTables.bootstrap4.min.css. There are conficting, you will see two sets of sorting arrows. Remove the jquery.dataTables.min.css. Use the Download Builder to obtain the correct style integration files for the framework you are using.

    Since you are using stateSave the "order": [[ 21, "desc" ]], will be overwritten when the state is loaded so it will have the last order the user set. You can use stateLoadParams to force the loaded sort order to the Date column.

    See this updated example with the commented out jquery.dataTables.min.css and the updated stateLoadParams:
    http://live.datatables.net/jahazase/1/edit

    Kevin

  • ArielSAdamsNASAArielSAdamsNASA Posts: 105Questions: 15Answers: 0

    @kthorngren

    What if I wanted the user's last selected sort to be saved, but show the arrow down for the date on first load of the page?

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

    Are you saying you want to always sort by the Date column then by any user selected sorting? If so use orderFixed.

    Kevin

  • ArielSAdamsNASAArielSAdamsNASA Posts: 105Questions: 15Answers: 0

    @kthorngren

    I want the table to be sorted by the date column on the first load of the page. When the page first loads, the date column is sorted, but the arrow does not indicate that it is active. This is the issue. This state will save if the user does not select another sort arrow button. If the user selects another button, the state will be saved.

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

    Can you create a simple test case to demonstrate the issue, please, and we'll take a look,

    Colin

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

    I can see the problem but not sure why its happening:
    http://live.datatables.net/jahazase/2/edit

    Steps to recreate:
    1. Click Clear state button
    2. Click Run with JS
    3. No columns are sorted
    4. Sort an column
    5. Click Run with JS
    6. That column will be sorted
    7. Click Clear state button
    8. Click Run with JS
    9. No columns are sorted
    10. Look at the console output at the last stateSaveParams to see this output for order:

    order: Array(1)
    0: Array(2)
    0: 21
    1: (2) [0, 'desc']
    
    1. Look at the first output, after the "State Cleared" message, to see the correct order array:
    order: Array(1)
    0: (2) [21, Array(2), _idx: -1]
    

    This simple test case works:
    http://live.datatables.net/kabisepe/1/edit

    Thinking there is something with Searchpanes I upgraded to the 2.0.0 and nightly version but still the same. Not sure what is causing the malformed order array for the last stataeSaveParams.

    Kevin

  • ArielSAdamsNASAArielSAdamsNASA Posts: 105Questions: 15Answers: 0

    @kthorngren

    I removed all the buttons and visible: false for the columns which got it to work. So it has something to do with that. Not sure what the next step is so I can continue to use buttons and hide some columns, but make the arrow work for the order.

    http://live.datatables.net/jahazase/9/edit

  • ArielSAdamsNASAArielSAdamsNASA Posts: 105Questions: 15Answers: 0

    @kthorngren

    I removed all the buttons and visible: false for the columns which got it to work. So it has something to do with that. Not sure what the next step is so I can continue to use buttons and hide some columns, but make the arrow work for the order.

    http://live.datatables.net/jahazase/9/edit

    Could you take a look at this?

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

    This is something for the developers to look at. Maybe @allan or @sandy can help determine if the issue is with columns.visible or SearchPanes.

    Kevin

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    The error in the example is here:

    dt.column(21).order([0, 'desc']).draw();
    

    column().order() takes a single parameter - it is not the same method as order(). It should be used as:

    dt.column(21).order('desc').draw();
    

    Or if you prefer the array syntax use order():

    dt.order([21, 'desc']).draw();
    

    http://live.datatables.net/jahazase/20/edit

    Note that column 21 is hidden by default, which can give the impression that there is no sorting applied.

    Allan

Sign In or Register to comment.