I have settled my datables within a tabbed container, If the table is too long, it overflows. The following code resizes the columns when i change tabs:
$('#tmTabs').tabs( {
"show": function(event, ui) {
var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
if ( oTable.length > 0 ) {
oTable.fnAdjustColumnSizing();
}
}
} );
but, is a bit taxing on processing time and this current code only works when you change the tab. The table overflows, when any operation is called on it, that being sorting, adding a row, or filtering etc.
Heres a screenshot of the overflow, you can see on the right side, as pointed by the arrow (just blanked out the data with white boxes, so dont worry about those):
If necessary, heres the rest of my code to create the dataTables (i am also using the editable plugin):
$('.dataTable').each(function(){
//get ID of current table;
tblID = $(this).attr("id");
var pattern = "[0-9]+";
$tblIDNum = tblID.match(pattern);
//transform this table into a data table
$(this).dataTable({
"sScrollY": "600px",
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
"aoColumnDefs": [
{ "sWidth": "10%", "aTargets": [ -1 ] }
]
})
.makeEditable({
//ajax requests for server-side processing
sUpdateURL: "UpdateData.php",
sAddURL: "AddData.php",
sDeleteURL: "DeleteData.php",
//Button Customization
oAddNewRowButtonOptions: {
label: "Add...",
icons: { primary: 'ui-icon-plus' }
},
oDeleteRowButtonOptions: {
label: "Remove",
icons: { primary: 'ui-icon-trash' }
},
oAddNewRowOkButtonOptions: {
label: "Confirm",
icons: { primary: 'ui-icon-check' },
name: "action",
value: "add-new"
},
oAddNewRowCancelButtonOptions: {
label: "Close",
class: "back-class",
name: "action",
value: "cancel-add",
icons: { primary: 'ui-icon-close' }
},
oAddNewRowFormOptions: {
title: 'Add New Row',
show: "blind",
hide: "explode"
},
//Link button ids
sAddDeleteToolbarSelector: ".dataTables_length",
sAddNewRowFormId: "formAddNewRow"+$tblIDNum,
sAddNewRowButtonId: "btnAddNewRow"+$tblIDNum,
sAddNewRowOkButtonId: "btnAddNewRowOk"+$tblIDNum,
sAddNewRowCancelButtonId: "btnAddNewRowCancel"+$tblIDNum,
sDeleteRowButtonId: "btnDeleteRow"+$tblIDNum
});
});
What could the solution be? I don't think should be difficult, if it weren't for all the Javascript, a CSS overflow property could just be changed. Makes me regret using Datatables. : /
