table width grows with button that calls fnDraw()

JCii

Hi Allan et. al.,

I have a page with two datatables on it. I have a button which calls fnDraw() on one of the tables, by ID. When I call it, the tables grow in width. Even if there are no rows in the table. If I call fnDraw() for the other table, then both tables grow. I just upgraded to 1.8.2 without resolve.

I've experimented with turning bAutoWidth on and off and setting sWidth. Any suggestions on what else I can try?


[code]


Sign-in





card#
skills
full name?!






jqrfyWSignin($("#signinTable"), {
"sScrollY": "300px",
"bPaginate": false,
"bAutoWidth": false,
"bLengthChange": true,
"bServerSide": true,
"sAjaxSource": "/WorkerSignin/AjaxHandler",
"oLanguage": datatable_lang_@(CI.TwoLetterISOLanguageName),
"bProcessing": true,
"aoColumns": [
{"mDataProp": "dwccardnum", "sWidth": "3em"},
{"mDataProp": "skills", "sWidth": "3em"},
{"mDataProp": "fullname", "sWidth": "3em"}
],
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */
aoData.push( { "name": "todaysdate", "value": $('#todaysdate').val() } );
aoData.push( { "name": "dwccardnum", "value": $('#dwccardnum').val()} );
aoData.push( { "name": "wa_grouping", "value": $('#wa_grouping').val()} );
aoData.push( { "name": "typeofwork_grouping", "value": $('#typeofwork_grouping').val()} );
$.getJSON( sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json)
} );
},
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).attr('requestedID', aData['WSIID']);
//alert(aData['WID'] + "-" + aData['WSIID']);
if (aData['WAID'] > 0) { // green
$(nRow).addClass('statusGreen');
}
return nRow;
}
});

function jqrfyWSignin(myTable, myOptions) {
var oTable;
oTable = $(myTable).dataTable(myOptions).fnSetFilteringDelay(400);
$(myTable).find('tbody').click(function (event) {
$(oTable.fnSettings().aoData).each(function () {
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');

});
$(myTable).find('tbody').dblclick(function (event) {
$('#dwccardnum').val($(event.target.parentNode).find('td:first').text());
$("#availAssignTable").dataTable().fnDraw();
});
}
[/code]

JCii

Update: I found way to activate/deactivate the drawing problem.

"sScrollY": "300px",
"bPaginate": false,

If I switch off line 19 (sScrollY) and change bPaginate to true, then the table doesn't grow wider...

ideas?

allan

Can you link to your example which shows this problem please? Also, does this happen in all browsers, or just one particular one?

Allan

jp_noronha

Allan

i found out that problem happens with all, check my discussions i may have solved it, but had to change datatables script (something i prefer not to do).

nevertheless there's still the matter of the column resize of the header and footer when using pagination and sScroll parameters. they just don't fit (IE8), i had to give up using those.

JCii

It happens with FF and Chrome. There are other layout issues with IE, and I told the non-profit to just use Chrome or FF so I wouldn't have to test against them all.

If you goto: http://dyrn.dyndns-at-home.com:4242/Account/LogOn
(I'll email a test id and pw)
then goto here:
http://dyrn.dyndns-at-home.com:4242/WorkAssignment

click the update buttons a few times under Chrome or FF and you will see the table widths grow, even with no rows in the table.

CrashMeister

This issue is in FF and IE (I have not tested others). I narrowed it down to fnAdjustColumnSizing(), which may be called by fnDraw() as it manifests there too.

I changed my fnAddData to set the boolean to true and then did not call fnDraw. The table size stayed the same, but the performance is not good. If I add fnAdjustColumnSizing() after the table is built, then the sizing increases on every rebuild.

My table def is:
[code]
ifsTable = $j('#ifsTable').dataTable( {
"sScrollY" : "485",
"bPaginate" : false,
"bFilter" : false,
"bInfo" : false,
"bProcessing" : true,
"bSort" : false,
"fnRowCallback" : function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// Set background for popup rows
if (aData[1] == "Air :" || aData[1] == "Ground :") {
$j(nRow).css("background-color", "#bbcbdf");
$j("td:eq(1)", nRow).css("text-align", "right");
}
return nRow;
}
} );
[/code]

To recap:
fnAddData(xxx, true) and nothing else = OK.
fnAddData(xxx, false) followed by fnDraw() = Bad.
fnAddData(xxx, true) followed by fnAdjustColumnSizing() = Bad.

I would really like this to be fixed ASAP.

Thanks,
Craig.

CrashMeister

The fix posted here: http://www.datatables.net/forums/discussion/comment/26217#Comment_26217
seems to work for all but tables with sorting and scrolling enabled.

jasheets1

I posted a small change on the other thread to fix the tables when sorting and scrolling is enabled: http://www.datatables.net/forums/discussion/comment/27901#Comment_27901