How to refresh DataTables after inserting new columns to the table element?

nya13

Not sure if I'm missing a step here or approaching this incorrectly, but I generated a DataTable using a JSON. A bit after, I a dynamically added 2 table columns to the table element. I basically used the table element that DataTables uses, emptied it and then appended the datatable.rows().nodes() to it and ran my function to insert those 2 additional columns. I had to do it that way in order to be able to use my old legacy function that inserts columns to a table element.

I then ran datatable.data().draw(false). I can see the column headers are added along with the cells on each row of the body. However, when I do a filter search so that no matching results shows up, the colspan is missing 2 units and not spanning correctly. Maybe I did not fully update the data table or maybe I can force that colspan to be say 99999 right at the beginning?

kthorngren

Datatables doesn't support dynamically adding columns. To add columns you will need to use destroy(), add the new columns then reinitialize Datatables. Can you use your legacy function to insert columns before initializing Datatables?

then appended the datatable.rows().nodes()

Sounds like you are using Javascript or jQuery methods to add the rows. Datatables won't know about this. See this FAQ.

the colspan is missing 2

Is this in the thead or tbody? Datatables doesn't support colspan in the tbody. See the. HTML requirements doc for more info.

Can you post a link to your page or a test case showing what you are doing so we can offer more specific help?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

nya13

Yes, I'm using jQuery to manipulate the table dynamically. I will experiment with that .destroy() and see if I can add those additional columns to re-reinitialize the DataTable so that it is fully aware of the header/body it should have.

The missing colspan is in the "No Matching Records Found" cell, which was generated in the tbody I believe. If we could set that message with a colspan of say 99999, that would fix that problem for most situations.

kthorngren

The missing colspan is in the "No Matching Records Found" cell

Ok, I understand now. I believe the colspan will be set to the number of columns in the table. Try this example and perform a search to clear all rows. Inspect the row and you will see a colspan of 6.

<td valign="top" colspan="6" class="dataTables_empty">No matching records found</td>

Can you post a test case the demonstrates the problem?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Or maybe the issue is due to how you are adding the columns.

Kevin

nya13

Yes, that is correct. The "No matching records" cell element is using the number of header columns (that it is aware of...) to set the colspan. I don't see why it bothers trying to set it to the exact number of columns however and should just set to a big number like 99999. I have somewhat resolved this by using the draw callback from the initialization of DataTable() to perform a check on the dataTables_empty element and set the colspan to 99999 if it was found.

kthorngren

I would say the reason the colspan is set to the number of columns in the table is that it will have predicable behavior. Setting it to a large number may have unpredictable results with certain browsers.

Note that the MDN colspan docs state this:

Values higher than 1000 will be considered as incorrect and will be set to the default value (1)

Sounds like you are trying to work around the unsupported addition of columns after Datatables initialization.

Kevin