Issue with destroy and column widths

bontempi

I've noticed that the destroy method adds style="width: XXpx;" to all the th elements within the table. This seems to prevent auto column sizing from working correctly when the datatable is re-initialised. Why does it do this?

https://jsfiddle.net/zjf1qeLk/

kthorngren

@allan can comment on why the width settings remain and if they should be cleaned up. I built a simple test case that shows the column widths are resized after destroy() and reinitializing the Datatable:
https://live.datatables.net/dodobuge/19/edit

It swaps the Position and Extn columns which are different widths. The sizes are adjusted appropriately. Can you provide a simple example that shows the problem you are trying to solve?

Kevin

bontempi

Hi Kevin,

Thanks for your reply.

The issue I'm having is with getting columns to have a sensible auto width. I'm aware of gotchas such as redrawing the columns if the datatable was initialised in a hidden tab. But the issue I'm having is much more basic.

I simplified my code as much as possible and found that the destroy method seemed to be the issue. If you look at the below example, the auto widths are much more sensible if the destroy line is commented out. Otherwise it seems to set the width based on the column heading and not on the row data.

https://jsfiddle.net/xzL397yw

I realise in this example code that the destroy is not needed. But the concept would be having a "Refresh" button and destroying the existing datatable before creating a new one based on the latest data. I know an alternative would be to clear the rows and add the data again, but the documentation does mention that a memory leak could occur if the datatable is re-initialised without calling destroy first.

Thanks,

Graeme

kthorngren

Interesting, yes the remaining style attribute does cause an issue. Possibly the difference between using columns.title in my example versus the HTML thead. I updated your example to remove the style attribute and the destroyed and reinitialized table looks like you are expecting.
https://jsfiddle.net/w98e03rx/

You can use this as a workaround until @allan comments on the issue.

Kevin

bontempi

Thanks Kevin. That's a helpful workaround.

allan

You are right - DataTables currently does not remove the widths it assigns, when destroy() is called. Perhaps it should, but at the moment there is no way to determine if the width assigned is the one from before DataTables was run on the table, or if it is a width assigned by DataTables.

I'm actually working on a similar issue at the moment, and it might be I need to find a way to address that.

For the moment, go with Kevin's workaround!

Allan