order + reorder not working

craigh

Greetings,

I have a simple table with the RowReorder extension.

    const tableObj = $('#seats');
    const table = tableObj.dataTable({
        paging: false,
        searching: false,
        info: false,
        rowReorder: {
            selector: 'i.sortable-handle',
        },
    });

When I click a column header to order the table, it does so, but then if I drag a row to a new order it fails and the row 'floats' back to its original order/location. There are no errors in the console.

How can I enable both order and reorder at the same time?

allan

If you could link to a test case showing the issue, I'd be happy to take a look at the problem.

It sounds like you might be expecting the row to move out of order? That isn't how RowReorder works - it uses a "data swap" method - i.e. it works best with sequences which can be ordered, and the other values in the row rewritten to match the new position. This is a good example of that.

RowReorder is not like jQuery UI Sortable where you can just move a row to another location and it only update the DOM.

Allan

craigh

Allan, thank you for your quick response.

Yes, I am expecting the order to change through manual drag/drop. This is what I thought RowReorder did. I am not following what you mean by 'move out of order' or your explanation of 'data swap'.

Your example seems to work like I expect, I can click the 'order' header to sort and then drag/drop rows after that. This is what I am going for, but not seeing how yours is different from mine - other than I have allowed for ordering on multiple columns. (I am assuming the editor implementation is not a requirement for this part of the functionality).

How do I create a test case?

kthorngren

am not following what you mean by 'move out of order' or your explanation of 'data swap'.

The RowReorder docs discusses this.

Basically the rowGroup.dataSrc column is used to keep to keep the row order. The data swap is that the indexes (or whatever is in the rowGroup.dataSrc column is swapped between the rows affected by the row reordering. It is expected that the only column allowed to sort is the rowGroup.dataSrc column. See this example.

Take a look at this example from this thread. It doesn't use RowReorder but allows drag and drop between Datatables. No matter where you drop the row it will likely be displayed somewhere else in the table due to sorting. Using a "index" type column is the way Datatables handles this to keep the rows in the order they are placed.

I am assuming the editor implementation is not a requirement for this part of the functionality

That is correct.

How do I create a test case?

https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

craigh

thanks Kevin @kthorngren !

I am still working through this and it may take some more time.

To summarize - I'd like to be able to sort by any column and then drag/drop via rowreorder after that.

Based on what you said, am I correct to conclude that what I want is impossible? If so, can you think of a workaround? My boss is insistent.

kthorngren

The rowReorder.update can be set false to keep the automatic table update from happening. You can see the behavior in this example:
https://live.datatables.net/tuneneyi/1/edit

You can then use the row-reorder event to handle any needed updates. Note the data swap does not occur. Also update of the table sorting does not occur. However if you perform another action like sort, search or page the Datatable will be redrawn and the order will be reset based on the table sort. You can see this with the following steps:

1. The order is set to the Name column
2. Move Airi Satou below Angelica Ramos
3. Type a in the search input

You will see Airi is back at the top of the table.

If you still have questions please provide details of what is supposed to happen after the row is reordered. Also how do you plan to keep the rows in the reordered positions with sorting by any column.

Kevin