Disable Table and Column Resizing
Disable Table and Column Resizing
burgoon
Posts: 1Questions: 0Answers: 0
I am trying to turn off functions that resize the table and column widths after sorting.
My problem:
I'm using a basic table with sScrollY set to TRUE, bPaginate set to FALSE, and bFilter set to FALSE, and bAutoWidth set to FALSE. Basically I just want a table that sorts with a set height (using scrollbars for overflow). Everything works fine when there are enough records (rows) to force overflow and thus scrollbars. However when I have only a couple rows (not enough to force scrollbars) every time I click a column to sort, the table width and column I sorted increase slightly in width. It's like the script is adding a little width to everything to account for scrollbars that are not there.
My code:
$('#myScrollTable').dataTable({
"bAutoWidth": false,
"sScrollY": "302px",
"bPaginate": false,
"bFilter": false,
"aoColumnDefs": [
{ "sWidth": "100px", "aTargets": [ "_all" ] }
]
});
Other notes:
I've tried everything I can think of over the last four hours and nothing seems to prevent the table from auto-resizing its width (even with bAutoWidth set to false ... unless I'm interpreting that setting wrong). I will note this seems to happen only in modern browsers, ironically IE7 and IE8 don't seem to have the problem.... though IE9 and FF4 do).
My fix was to scan through the jquery.dataTables.js file and comment out anything setting width (i.e. anything with something.width = ... I commented out). This actually worked but the default look of the table was off.
So my thought.. if someone could tell me the "width resizing function" that is triggered on a sort ... that would help so I can just comment out that function.
My problem:
I'm using a basic table with sScrollY set to TRUE, bPaginate set to FALSE, and bFilter set to FALSE, and bAutoWidth set to FALSE. Basically I just want a table that sorts with a set height (using scrollbars for overflow). Everything works fine when there are enough records (rows) to force overflow and thus scrollbars. However when I have only a couple rows (not enough to force scrollbars) every time I click a column to sort, the table width and column I sorted increase slightly in width. It's like the script is adding a little width to everything to account for scrollbars that are not there.
My code:
$('#myScrollTable').dataTable({
"bAutoWidth": false,
"sScrollY": "302px",
"bPaginate": false,
"bFilter": false,
"aoColumnDefs": [
{ "sWidth": "100px", "aTargets": [ "_all" ] }
]
});
Other notes:
I've tried everything I can think of over the last four hours and nothing seems to prevent the table from auto-resizing its width (even with bAutoWidth set to false ... unless I'm interpreting that setting wrong). I will note this seems to happen only in modern browsers, ironically IE7 and IE8 don't seem to have the problem.... though IE9 and FF4 do).
My fix was to scan through the jquery.dataTables.js file and comment out anything setting width (i.e. anything with something.width = ... I commented out). This actually worked but the default look of the table was off.
So my thought.. if someone could tell me the "width resizing function" that is triggered on a sort ... that would help so I can just comment out that function.
This discussion has been closed.
Replies
The function that sets the widths of the columns is _fnScrollDraw - although you can't just comment the whole thing out - just the parts which set the widths.
Allan
I am facing the same issue. Is it fair to say that it's a bug? And if so, will this be fixed any time soon?
Alternatively, is there a work around that does not involve modifying the dataTables.js as that does not seem like a good idea to me (from maintenance/upgrade perspective).
Thank you.
Kind regards,
Grigori
Allan
I am having issue with column widths. I set the column width using sWidth and the bAutoWidth is false. While displaying the table(at loading) it seems to display the header with correct width , but when the table is drawn the width of columns changes and this is causing the header columns to truncate(displaying).
Please find my code below:
[code]
Company
Buy/Sell
Instrument
Order Qty
Limit Price
Vol Done
Gross Price
Executed Value
Commission
Entered By
Received Date/Time
Trader
Contact
Order Info
Order Id
function processFOTable() {
dataTable = $('#foTable').dataTable( {
"iDisplayLength": 50,
"bProcessing": true,
"bServerSide": true,
"bAutoWidth": false,
"oLanguage": {
"sLengthMenu": 'Display '+
'10'+
'25'+
'50'+
'100'+
'All'+
' records'
},
"sAjaxSource": "{!TestAjaxUrl}?,
"bStateSave": false,
"bDeferRender": true,
"aaSorting": [[ 0, "asc" ]],
"aoColumns": [
{"sType": "html", "sWidth" : "70%"},
{"sType": "html", "sWidth" : "70%"},
{"sType": "html", "sWidth" : "70%"},
{"sType": "html", "sWidth" : "70%"},
{"sType": "html", "sWidth" : "70%"},
{"sType": "html", "sWidth" : "70%"},
{"sType": "html", "sWidth" : "70%"},
{"sType": "html", "sWidth" : "70%"},
{"sType": "html", "sWidth" : "70%"},
{"sType": "html", "sWidth" : "70%"},
{"sType": "html", "sWidth" : "70%"},
{"sType": "html", "sWidth" : "70%"},
{"sType": "html", "sWidth" : "70%"},
{"sType": "html", "bSortable": false , "sWidth" : "70%"},
{"sType": "html", "bVisible": false }],
"fnServerData" : function ( url, data, callback, settings ) {
$.ajax( {
"url": "{!testajaxUrl}?,
"data": data,
"success": function (json) {
callback( json );
},
"dataType": "json",
"cache": false
} );
},
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
return nRow;
}
});
}
[/code]