order + reorder not working
order + reorder not working
craigh
Posts: 3Questions: 1Answers: 0
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?
Answers
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
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?
The RowReorder docs discusses this.
Basically the
rowGroup.dataSrccolumn is used to keep to keep the row order. The data swap is that the indexes (or whatever is in therowGroup.dataSrccolumn is swapped between the rows affected by the row reordering. It is expected that the only column allowed to sort is therowGroup.dataSrccolumn. 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.
That is correct.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
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.
The
rowReorder.updatecan 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-reorderevent 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:ain the search inputYou 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