DataTables Width, "bDestroy": true

robertbrower

I'm having a problem with the jQuery DataTables plugin. The first time I invoke the $.dataTable() it produces a nice looking table. But the second time I call it (To reinitialize the table), the column widths are not correct, i.e. the table is squished horizontally. In all cases, the same code is called so I do not understand. Furthermore, this does not happen with Firefox, only with Internet Explorer, although Explorer is my target browser.

My javascript (inside the success handler for an ajax call):

success: function (result) {
if (oApplicationsTable != undefined) {
oApplicationsTable.fnDestroy();
oApplicationsTable = null;
}
$(this).html(result.d);
oApplicationsTable = $("#applicationsTable").dataTable({
"bDestroy": true,
"bAutoWidth": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bLengthChange": false,
"aLengthMenu": [[10, 20, -1], [10, 20, "All"]],
"iDisplayLength": 10,
"sDom": '<"H"ilfr><"applicationsList"t><"F"p>',
"aoColumns": [
/* checkbox */{"bSortable": false, "bSearchable": false, "bVisible": true },
/* Name */{"bSearchable": false, "bVisible": true },
/* LongName */{"bSearchable": true, "bVisible": false },
/* Location */{ },
/* Category */{ },
/* Description */{"bSearchable": false, "bVisible": true },
/* LongDescription */{"bSearchable": true, "bVisible": false }
],
"aaSorting": [[2, "asc"]],
});

My markup looks like this:

<%--EDIT REPORT GROUPS DIALOG--%>



 
 






Name
LongName
Location
Category
Description
LongDescription








I have spent an aweful lot of time reading other similar posts, but have not found the answer. Thanks for reading.

Robert

allan

Assuming you are using the latest code, then DataTables should restore the original width of the table on destroy, however it must do this with pixel values, rather than a percentage value due to the limitations in being able to read values. It's possible this might be impacting on your table - if you could post an example that would be most useful. Failing that you could call fnDestroy and then replace the table HTML, set the width to 100% and then initialise the table.

Allan

robertbrower

Thank you Allan.

"you could call fnDestroy and then replace the table HTML, set the width to 100% and then initialise the table."

This is the solution.

Yank

Thanks allan for your great plugin ..

@robertbrower: I have same problem for column width. Can you post your solved code.
I want to see where I am doing mistake.

NJDave71

I am using datatables v 1.8.1 and when I set bDestroy to true and reinitialize the table
the table section changes and the width of the table is wider than the toolbar header and footer.

I am correcting this by doing the following

[code]
$('#example').css('width', '')
[/code]

Hope this helps.

gicif

Yes, NJDave71, this works great !
Thanks !

askival

I reaql life-saver for me too NJDave71. Thanks!