Intializing DataTables breaks previous ones

anyopal

Link to test case: https://jsfiddle.net/qnvehfsx/
Debugger code (debug.datatables.net): https://debug.datatables.net/udorix
Error messages shown: no errors
Description of problem: previous tables break when new tables are created without throwing errors.

wblakenc

I am not seeing anything in the test case that shows the problem. Can you elaborate?

anyopal

Try filtering in previous data tables, or searching, the functionality is broken

kthorngren

Looks like the problem is the way you are appending the tables to the DOM:

                container.innerHTML += `</br><div class="container-fluid"><table id="${idBatch}Table" class="table table-striped table-bordered nowrap"><thead><tr><th> Job #</th><th> Status</th><th> Work Order</th><th> Customer Name</th><th> Field Name</th><th> Total Acres</th><th> Action</th></tr></thead></table></div>`;

Looks like this process is overwriting the previous tables in the HTML thus removing the events, etc that Datatables applies. Changed your test case to write each table to its own div element:
https://jsfiddle.net/bjgfc1oe/

This isn't dynamic so will let you work out the best way to do this based on your full solution. {Stack OVerflow](https://stackoverflow.com/) might be a good resource to learn the best way to handle the DOM the way you want.

Kevin