Sort arrow active based on order

ArielSAdamsNASA

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.

kthorngren

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

ArielSAdamsNASA

@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?

kthorngren

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

Kevin

ArielSAdamsNASA

@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.

colin

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

Colin

kthorngren

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

ArielSAdamsNASA

@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

ArielSAdamsNASA

@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?

kthorngren

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

allan

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