Table Headers Width Too Small

Table Headers Width Too Small

opeth58opeth58 Posts: 2Questions: 0Answers: 0
edited April 2012 in DataTables 1.8
Hello, I have the following object:
oTable = $("#adlogs").dataTable({
bJQueryUI: true,
bAutoWidth: false,
bScrollCollapse: false,
bPaginate: false,
bProcessing: true,
bLengthChange: false,
//aoColumns: [{"sWidth":"68px"},{"sWidth":"61px"},{"sWidth":"81px"},{"sWidth":"81px"},{"sWidth":"387px"}],
aoColumns: [{sWidth:"10%"},{sWidth:"10%"},{sWidth:"12%"},{sWidth:"11%"},{sWidth:"57%"}],
bScrollInfinite: true,
sScrollY: "407px",
iDisplayLength: 22,
fnDrawCallback: function() {
//clickRowHandler();
}
});
oTable.fnAdjustColumnSizing();
oTable.fnDraw();

When the table is first displayed, the table headers are too narrow. They are in the proper order but not properly sized. When looking in Firebug i noticed that the widths were rendered in px not % ie. 10px instead of 10%. Once i click on a header to sort, the headers expand to their proper size. I've tried this with 1.9 as well. I've noticed too that if i take the sScrolly line out, the headers display fine but then the table expands beyond the parent div.

Replies

  • LightmanLightman Posts: 4Questions: 0Answers: 0
    edited April 2012
    Call oTable.fnAdjustColumnSizing() once your datatable is appended to the page and not before or after fnDraw() I guess.
  • opeth58opeth58 Posts: 2Questions: 0Answers: 0
    Fixed it with jquery css call.

    $("#tabs-4 .dataTables_scrollHeadInner").css("width","720px");
    $("#tabs-4 .dataTables_scrollHeadInner table").css("width","705px");

    Plug in whatever values you need. In my case 720 & 705. Now works on initial display.
  • marcusmarcus Posts: 3Questions: 0Answers: 0
    I'm having the same problem with infinite scrolling tables and having to call fnAdjustColumnSizing() after the table is rendered to get them to size properly.
This discussion has been closed.