SOLVED - What is the best way to create a datatable for a table with dynamic structure?

ashishkulkarni

Hi guys,

I was not sure where exactly this discussion fits. Hence, I have put it under General.

I have a screen where I am displaying 2 datatables. The first one is a list of files and the second one to display the contents of a selected file.

The structure of the first datatable is fixed. Hence, I have defined it in document ready function and when the user clicks a search button, I am calling fnClearTable to clear this datatable and then, populating it with dynamic data using fnAddData.

This one works fine.

However, the structure of most files is different. Hence, I am regenerating the contents of thead and tfoot and then, using further javascript to split the incoming line data using the string split function.

I am facing 3 issues:

1. My target platform is IE7. And I am using jQuery 1.8.2 with datatables 1.9.4. When I use colVis, I get an issue that colVis does not deactivate. The list of columns with checkboxes remains in the view constantly even when I select mouseover to activate. I have tried replacing my colVis.css file as per another article. But no luck.

2. When I use HTML4 strict or transitional doctype, colVis works as it is supposed to. However, the contents of the second datatable do not show up initially. They do as soon as I click on anything on the particular datatable. If I set the doctype to HTML5, the data shows up but colVis control starts to misbehave and starts to show the controls at random location on screen. For now, I have disabled colVis but would like to use it soon.

3. I am also using columnFilter on both datatables. The filters are in tfoot. And these line up properly for the first datatable. However, they don't line up properly for the second datatable initially. However, as soon as I click anything on the second datatable - next button, sort button, attempt to filter data, etc., the datatable is redrawn and everything lines up nicely. I would like the datatable to be drawn correctly at the start itself.

For the second datatable, I am initialising it with a basic structure and creating the datatable in document ready function. I am then destroying this datatable using fnDestroy and then, creating it again and adding data into it. Is this the best way to render datatables with dynamic structure for IE7? Or is there a better way?

Please also advise about the other issues.

Best Regards,

Ashish.

ashishkulkarni

I was hiding the DIV that contained the datatable before manipulating it's structure and data. Once I stopped hiding the datatable, it worked well.

Looks like datatable needs the table to be visible in the first place for proper redraw to work.