Trying to update multiple tables on a page when rows in a different/main table are reordered

tdadams

Link to test case: https://codepen.io/tdadams/pen/eYPZmaG?editors=1111

Description of problem: I have a main table that holds all of the building blocks used to build out model tables. When I re-order rows in the main table, I need to also update impacted rows in the models table. I expect any rows that have the same id as any of the re-ordered rows in the main table to get updated. In this case, its just the row number that should be changing both in the model data and DOM display.

Any help / tips / pointers is greatly appreciated!

tdadams

the wasUpdated data is updated in the models table, but the DOM doesn't update until i execute $('.dataTable.model').DataTable().rows().invalidate() in the console, which tells me the underlying data is getting updated. just not sure why the invalidate() in the rows().every() doesn't seem to trigger a re-render.

kthorngren

Looks like you will need to use the row-reordered. From the docs:

the event will be triggered after the row is dropped and after the data is updated.

Your code is capturing the row data before its changed. I moved your code to the Datatables JS BIN environment so I can save it - I don't have a codepen acct.
https://live.datatables.net/capoleje/1/edit

I added this so you can see what data is actually being used:

        console.log('row match:', JSON.stringify(currentData), JSON.stringify(newData));

The console output updates the object output at a later time when row reorder actually changes it. Its confusing

I changed to the row-reordered and I think its doing what you want:
https://live.datatables.net/retakaru/1/edit

Kevin

tdadams

Kevin...you are my hero! Just read through the docs for 'row-reorder' vs 'row-reordered' and it all makes perfect sense now. Thanks for taking the time to get me pointed in the right direction!!!

Tim