Is there a way to undo the DataTable intialization, change the table, and then initialize it again?

kurtishc

For the project I am working on, I am creating a table of <input> elements that users will fill in on the webform.

When I started, I made my own javascript code to add/remove a row to the table. But, due to another feature I need, the ability to hide a column, I decided to add DataTables API too after finding it through a google search. However, my add row function and DataTables seem to conflict when a column is hidden.

I have a table of inputs that has a hidden column(hidden via visible()). It has been initialized as a DataTable. I want to add a row to this table using my addRow function call which creates a tr and td element and fills each column with an <input> with a specific id. The original issue is that doing this with a column hidden causes the elements to not align with their columns correctly(ie the input for a hidden column is not hidden or assigned to the incorrect column).

So my solution was to unhide any hidden columns, call destroy() because I thought it would undo the changes from DataTables() call, run my original add function to just change the base table, then recall DataTables() to restore the changes thanks to the API, and then rehide any columns that were hidden.

However, I've tried implementing this, but I've run into issues such as a TypeError regarding length and another TypeError with a parentNode. I am guessing this has to do with DOM. My function that adds a row doesn't update some values that the DataTable API uses to associate cells to a column in order to hide columns, I guess?

If that is the case then I guess destroy() doesn't do the sort of clean-up I am looking for. Right now, it would be difficult to go back and change my HTML and JS to instead try and implement this entirely with DataTables API. Is there a solution that can achieve what I want?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin