How to make the "grouped by" row move following the ordering

cezar.pimentel

Hello guys, how are you doing?

This is not a problem or a bug. This is more a question to check whether is it possible or not to do what I need.

I have a datatable with a orderFixed column. But, when I click to sort by a specific column, the group by header doesn't move up or down following the biggest or lowest number/text. It stays static.

Is there a way of making the "group row" (like Edinburgh) move up or down in the datatable depending on the sorted column value?

Here is an example of what I'm trying to achieve: http://cezarpimentel.com.br

Open the link above and:

Sort by Name or by Age, and notice that the grouped by row "Edinburgh" doesn't move. It always stays with "Edinburgh" as the first grouped by row in the sorting process, when in fact, what I expect is that when ordered by name the first "group by row" should by Tokyo, because that's the first name "Airi Satou", and when sorted by Age, the first "group by row" should be London, because the youngest person is 15 years old.

Is there a way to achieve what I am looking for?

Thanks in advance.

allan

Hi,

"Edinburgh" is always first because you have orderFixed: [ 2, 'asc' ], - i.e. it is always sorting by the city name first. Any additional ordering happens after that.

At the moment there isn't a way to achieve what you are looking for I'm afraid. It would imply that secondary sorting impacts the primary sorting. I'm not sure how that could be implemented.

I do see the point though!

Allan

cezar.pimentel

Hi Allan! First of all, thanks for your reply, I really appreciate it.

Well, I'll try to capture the "on sort" event and try to figure out a way of doing it.

If anyone else knows how to do it, please let me know.

Thank you guys!

Have a good one!

allan

Per column ordering is fairly baked into DataTables - it always orders one column first, then the next, etc. There isn't a way to make the first ordering dependent on the second which it sounds like what you want. I think implementing what you are looking for would require a replacing the ordering code in DataTables completely I'm afraid.

I will have more of a think about this, but can't promise anything.

Allan

kthorngren

I came up with something that seems to work. Its not very efficient as it requires ordering the table twice and looping all the rows to update an index column used for the row grouping. I copied your code into this example:
https://live.datatables.net/fopefolu/1/edit

The table requires an extra column to hold the row group index. This column uses columns.defaultContent to set a default index value of 0. The column is visible so you can see how the index works. You can hide it. Note the removal of the orderFixed option. This will be replaced by code in the order event.

The rowGroup.startRender option is used to display the value of the Office column since the rowGroup.dataSrc is set to the index column.

It first calls a function to create a one time order event. The event gets the current order then loops through all the rows with rows().every() in the current order. It builds an array of the grouped column values, office column in this case. This is used to set the index for each group.

There seems to a UI bug with RowGroup where the group start row is displayed twice if a second order() takes place quickly. The setTImeout() function is used to workaround the UI issue. The function changes the order to prepend the rowGroup.dataSrc column, ie replacing orderFixed. It then calls itself to setup a new one time order.

I haven't fully tested this and it may not be what you are looking for. @allan may have a better solution.

Kevin

allan

That is very clever! It looks like there might be an issue with reversing the sorting, but that is some nice thinking.

Allan

kthorngren

The problem seems to be with the Datatables order code behavior. Might not be a bug but just the behavior of how it works. Tried it with both the nightly (DT2) and 1.13.8 in this test case:
https://live.datatables.net/tupoyetu/1/edit

It applies this after initialization:

table.order( [[3,"asc"],[0,"asc"]] ).draw();

Which is the same array built with the example when clicking on the Name column. Click on the Name column. Although it is sorted ASC with the API it is still sorted ascending after clicking the column. Seems like there might be some check to determine if the column ordering should be reset before applying the direction. Same thing happens if using shift for multiple columns then just clicking one of the multiple sorted columns.

Since this seems to be expected behavior we will need to check for ASC sorting to programmatically change it to DESC. I created a th click event that is initialized before Datatables so it runs before DT ordering to workaround this:
https://live.datatables.net/fopefolu/4/edit

It uses the column-selector of {integer}:visIdx to get the Datatables column index in case of hidden columns. If the clicked index matches the order() second array element's index and it's asc it will set a flag to indicate the order needs changed to desc in the order event.

Again I haven't fully test this but it seems to work with click or shift-click for multiple columns.

Kevin