Re-initialize Datatable: problem with column width after re-initialisation.

Pneumokok

Hello again!

I find a brilliant idea how to use DataTables - I have JQuery UI Menu, when you click an icon you see "show persons" item, when you click this item you will see JQuery UI modal Dialog with JQuery UI Tabs widget with 2 tabs: Friends and Family, and there is right place for DataTables - in Friend tab you see friends table, in Family you see table with family members. Unfortunately I have to initialise DataTables after opening dialog (it's about correct column size). Because of it, when I want to see family/friends tables again, I have to destroy and clear old tables when dialog is closing and when it's open re-initialise DataTables again. I do this in this way:
[code]$("#friendFamilyDialog").dialog({
width: 500,
modal: true,
autoOpen: false,
show: {effect: "fade", duration: 1000},
hide: {effect: "fade", duration: 1000},
close: function(){
friendsTable.fnClearTable();
friendsTable.fnDestroy();
familyTable.fnClearTable();
familyTable.fnDestroy();
}
});
[/code]

That is how I initialise DataTables:
[code]$("#browseFriendsAndFamily").click(function(){
var contPath='<%=request.getContextPath()%>';
$.get(contPath + "/friendFamily/getFriendsByUserId",
userId="+loggedUser.id, function(friendsList){
$("#friendFamilyDialog").dialog("open");
$("#familyUserMenu").toggle();
friendsTable = $("#friendsTable").DataTable({
"bJQueryUI": true,
"aoColumnDefs": [ {"bVisible": false, "bSortable": false, "aTargets": [3]}],
"bSortClasses": false
});
familyTable = $("#familyTable").DataTable({
"bJQueryUI": true,
"aoColumnDefs": [ {"bVisible": false, "bSortable": false, "aTargets": [3]}],
"bSortClasses": false
});
//add data to tables etc...
[/code]

But there is a problem - when I first time open Friend/Family dialog, everything is ok, column size is correct, when I resize dialog with mouse DatatTables are resizing too... But if I open dialog again, columns width is incorrect (width is very small, they not ,,fill" space in table) and columns are not resizible - when I resize dialog with mouse columns have constant (bad) width.
I will be very happy if anybody decides to help me.

Thank you in advance,
Pneumokok.

Pneumokok

It seems to be solved:

I should check if DataTable was initialised:
[code]if (friendsTable == null){
friendsTable = $("#friendsTable").DataTable({
"bJQueryUI": true,
"aoColumnDefs": [ {"bVisible": false, "bSortable": false, "aTargets": [3]}],
"bSortClasses": false
});
}
if (familyTable == null){
familyTable = $("#familyTable").DataTable({
"bJQueryUI": true,
"aoColumnDefs": [ {"bVisible": false, "bSortable": false, "aTargets": [3]}],
"bSortClasses": false
});
}
[/code]
And on closing Friends/Family dialog only clear tables:
[code]$("#friendFamilyDialog").dialog({
width: 500,
modal: true,
autoOpen: false,
show: {effect: "fade", duration: 1000},
hide: {effect: "fade", duration: 1000},
close: function(){
friendsTable.fnClearTable();
familyTable.fnClearTable();
}
});
[/code]