Changing Column Sort Order

shannonwrege

I have a datatable that collapses down in the mobile view. When in the mobile view, I want to change one of the columns sort order to be the one from one of the hidden columns.

For example, by desktop view has columns A, B, C. The mobile view has just A & B. When in the mobile view, I want column B to sort on column C. When in the desktop view, I want the column sorts to be normal (B on B and C on C).

Is this possible?

jr42.gordon

Why not just assign higher responsive/priority to columns A & C in mobile view?

shannonwrege

Because I want to display column B.

My actual columns are Date, Name, Rating. The name is more important to see than the rating, but the rating sort is more valuable than an alphabetic sort if the rating column is not visible. (disclosure: there are actually more than 3 columns ... just want to keep it simple for this discussion)

jr42.gordon

Try using multi_col_sort. Play around with it.

shannonwrege

Not quite sure how that is relevant. If the primary sort is alphabetic on the name column, the secondary sort won't matter at all. I need to change the primary sort of the Name column to the rating in the mobile view.

jr42.gordon

You make your Name column sort on the Rating column first, before sorting by Name. Note that this will be done regardless if you are in Desktop or Mobile view.

{
            targets: [ 1 ],
            orderData: [ 2, 1 ]
}

If this isn't desired and you only want this type of sort in Mobile view, you might try getting fancy. Utilizing responsive/classes, you could have normal Name column in desktop mode, but in Mobile mode you hide it and show your mobile Name column with the above sorting config. The column numbering would match what they are in the DOM, starting with 0, before DataTables is applied.

Date, Name, Name(mobile), Rating

Apply desktop and tablet to the Name column, and mobile to your Name(mobile) column. Your columnDef config for the Name(mobile) column would be as follows.

{
            targets: [ 2 ],
            orderData: [ 3, 2 ]
}

Just a thought, @allan might have a better solution that this.

allan

There isn't a way to dynamically change which data point a column is sorted on (i.e. you can't have column A initially sorting itself, and then change it to be sorted by the data in column B at some future point - at least not without destroying the table).

What I would suggest instead, is having the two different columns shown in the different responsive views. Even if they contain the same visual data, they are being sorted using different data.

Allan