I set my data in a tabbed container. If the table is too long, it overflows. The following code resizes columns when changing tabs:
$('#tmTabs').tabs( { "show": function(event, ui) { var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable(); if ( oTable.length > 0 ) { oTable.fnAdjustColumnSizing(); } } } );
but, it is slightly taxed on processing time, and this current code only works when the tab is changed. Table overflow when any operation is called on it, sorting, adding a row or filtering, etc.
Here is a screenshot of the overflow, you can see on the right side, as indicated by the arrow (just crossed out the data using white boxes, so do not worry about it):
If necessary, the rest of my code will create dataTables (I also use an 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 be the solution? I don’t think it should be difficult, if not all Javascript, the CSS overflow property could simply be changed. Makes me regret using Datatables.:/