Table column headers incorrectly aligned when using scrollY option

rv_nath

Hello Allan,

I am using DataTables 1.9.4 with Bootstrap. Things worked perfect and fine until I needed to use scroll option. After enabling the sScrollY,the column headers get shrunk to the left side. On clicking the headers, they get aligned correctly. But there is still a gap of about 1 empty row between the header row and body rows.

I have read the rules of posting and wanted to create a test case either with jsfiddle or datatables live. Unfortunately, I am unable to get links for bootstrap cdn...

Here is the code I am using: Sorry that the code is a bit lengthy...
HTML markup:
[code]



Choose a Pricing Option from below, or Create New Price Def












Price Def
Price
Fallback Opts
Rate Codes
Time Bands





pd1
100
None
None
None



pd2
100
None
None
None



pd3
100
None
None
None



pd
100
None
None
None



pd
100
None
None
None



pd
100
None
None
None



pd
100
None
None
None



pd
100
None
None
None



pd
100
None
None
None






$(function() {
window.priceTable = $("#price-list").dataTable({
"sDom" : "t<'span7'pr>",
//"sScrollY" : "200px",
"bPaginate" : true
//"bScrollCollapse" : true,
//"bAutoWidth" : true,
//"sScrollX" : "100%",
//"sScrollXInner" : "100%"
});
$(window).resize(function() {
window.priceTable.fnAdjustColumnSizing();
});
$(window).trigger('resize');
});
$('#price-def').on('change', function() {

if ($('#price-def').is(':checked')) {
$('#price-list').removeClass('inactive-table');
$('#price-list').contents().contents().contents().css('color', '');
$("#new-price").addClass('inactive');
} else {
$('#price-list').addClass('inactive-table');
$('#price-list').contents().contents().contents().css('color', '#cecece');
$("#new-price").removeClass('inactive');
}
});

$.extend($.fn.dataTableExt.oStdClasses, {
"sWrapper" : "dataTables_wrapper form-inline"
});
[/code]


regards,
RV

rv_nath

Here is a link to the screenshots showing how it looks...

screenshot after initializing datatables, but before header click: http://picpaste.com/dt_before-x23CuOyu.png

Screenshot after clicking the header row: http://picpaste.com/dt_after-l7UXnLe1.png

rv_nath

After some struggle I found that I need 2 call fnAdjustColumnSizing(), so that the headers can align themselves properly. I could verify that the columns do align properly, by calling the fn explicitly from firebug console, after the datatable was loaded.

Now the problem is, at what point of time should I call this fn? For this I need 2 know when the datatables has finished data loading (either static data or ajax).

I tried calling fnAdjustCol...() in the Draw callback fnDrawCallback, but then it seemed to go in a recursive loop. That is, each call to fnAjust...() resulted in Draw event, which again invokes fnAdjust.

One option could be to use a timer and wait for sometime to let Datatables finish.
Is there a better alternative?

allan

You should all it when your table is made visible (I'm presuming it is hidden when initialised - the screenshots make it look like that).

Allan