Table column headers incorrectly aligned when using scrollY option

Table column headers incorrectly aligned when using scrollY option

rv_nathrv_nath Posts: 7Questions: 0Answers: 0
edited September 2013 in DataTables 1.9
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

Replies

  • rv_nathrv_nath Posts: 7Questions: 0Answers: 0
    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_nathrv_nath Posts: 7Questions: 0Answers: 0
    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?
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    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
This discussion has been closed.