Best approach to sync row order across multiple DataTables based on shared column?
Best approach to sync row order across multiple DataTables based on shared column?
I have 4 DataTables on a page (inside tabs) that all share a common "Ticker" column in the same position. When a user sorts any table by clicking a column header, I want the other 3 tables to automatically reorder their rows to match, using the Ticker as the common identifier.
My current approach:
- Listen for order.dt event on each table
- When triggered, extract the Ticker order from the sorted table
- Reorder the other tables by:
- Mapping Ticker values to row data
- Clearing the table with .clear()
- Re-adding rows in new order with .rows.add()
- Calling .draw() to render
Issues I'm running into:
Calling .draw() on target tables sometimes triggers their own order.dt events, creating cascades
Need to prevent infinite loops.
Hidden tables (in inactive tabs) require .rows().invalidate() before .draw() to display correctly
Question: What's the recommended DataTables pattern for programmatically syncing row order across multiple tables? Is there a way to reorder rows without triggering events, or a better approach entirely that I'm missing? Any guidance on the proper API methods or event handling strategy would be appreciated!