Customized Row Reordering
Customized Row Reordering
Live Example: http://live.datatables.net/ayomin/edit#javascript,html
I am attempting to write a similar plugin to Row Reordering, but with several modifications including a few extra features. To explain some of the codebase, there are three basic options: the index column for the rows, an index control to use for the index column (currently only a button is supported), and a basic function callback after reordering has been completed. I inject a row created callback function at index 0 in aoRowCreatedCallback to assign the proper index column value. And I inject a row callback function at index 0 in aoRowCallback to be run last which will generate the indexing control markup.
As far as the reordering process goes, I use a standard sortable which uses the index row's control as the reordering handle. On the sortable update callback, I iterate over each tr and invoke fnUpdate on the data element located at the current index column value. I set that indexing value to the tr's index within the table and then attempt to redraw the table, as the data should now match the displayed markup.
This works fine for the first draw, however subsequent draws result in rendering errors as the data indexes do not match the rendered indices after the first reorder's draw. It's likely that I'm missing a step or two during the update process to properly inform the DataTable of the new structure.
I am attempting to write a similar plugin to Row Reordering, but with several modifications including a few extra features. To explain some of the codebase, there are three basic options: the index column for the rows, an index control to use for the index column (currently only a button is supported), and a basic function callback after reordering has been completed. I inject a row created callback function at index 0 in aoRowCreatedCallback to assign the proper index column value. And I inject a row callback function at index 0 in aoRowCallback to be run last which will generate the indexing control markup.
As far as the reordering process goes, I use a standard sortable which uses the index row's control as the reordering handle. On the sortable update callback, I iterate over each tr and invoke fnUpdate on the data element located at the current index column value. I set that indexing value to the tr's index within the table and then attempt to redraw the table, as the data should now match the displayed markup.
This works fine for the first draw, however subsequent draws result in rendering errors as the data indexes do not match the rendered indices after the first reorder's draw. It's likely that I'm missing a step or two during the update process to properly inform the DataTable of the new structure.
This discussion has been closed.
Replies
I made some modifications -- The row created callback now sets the tr ID to the row's index at the time it is added. This ID is used later to index into the table's backed data. This seems to work for default sorting on the index column, but any other sorting throws the system off. This is probably why standard row reordering didn't get into allowing resorting of the data. I think if I lock the sorting with the updated code it should be sufficient for my purposes, but if anyone could provide insight as to why resorting breaks the system and needs to be verboten it would be greatly appreciated.
With some finalization everything seems to be working perfectly. I submit a small bug for being unable to remove the sort indicator classes post-initialization here: http://datatables.net/forums/discussion/17355/_fnsortingclasses-does-not-remove-sort-classes-post-initialization#Item_1
And another update after I actually had coffee today and realized the tr node suffices as a parameter to fnUpdate() instead of the aoData index. I am not a clever man.