Trouble with fixed columns getting height of a dynamic table

burtmacklin31

DataTables has saved my carcass countless times and I'll be forever grateful for it.

However, I'm having a little trouble in this instance using the Fixed Column extension. I'm creating a table purely with javascript, and then placing it in a div. From there, then I create the DataTable instance, which generally works beautifully.

When I add "fixedColumns: true", things get dicey for me. Originally it would make it so the table doesn't even stay inside the container, it just overlaps everything on the page. I figured out that it wasn't getting the correct height of the table and/or container, which I assume is because I'm creating everything dynamically in javascript. It also wouldn't keep the left column fixed. So I added this to my CSS in hopes it would help:

.DTFC_ScrollWrapper {
  min-height: 1600px;
}

.DTFC_LeftWrapper,
.DTFC_LeftBodyWrapper,
.DTFC_LeftBodyLiner {
  min-width: 90px;
}

Setting the DTFC_ScrollWrapper height actually helped keep it inside the container, and the second bit helps keep the furthest-left TH fixed, but I can't get the entire left column to stay fixed on a horizontal scroll.

The funny thing is, this page is automatically refreshing every 30 seconds, and when the datatable refreshes after 30 seconds, everything works perfectly. It's got to be something with container heights and what not.

Here is my datatable code, which comes right after I place the initial table HTML code (in variable thtml):

$('div.stats-content').html(thtml);
$('table#player-stats').DataTable({
  scrollX: true,
  paging: false,
  fixedColumns: true,
  info: false,
  searching: false,
  order: [
    [3, "desc"],
    [5, "desc"],
    [6, "desc"],
    [4, "desc"]
  ]
});

Also, here is a link to a live page where you can see it happen. Once loaded, click on "Player Stats" to see my datatable. If you wait until the 30-second refresh timer resets, you'll see what I mean when the datatable suddenly works as expected on its second initialization.

Any help would be MUCH appreciated, and would save me many more hours spent trying to fix a problem that I'm sure has a simple solution.

Thanks!

kthorngren

I think you will need to use columns.adjust() when you initially display the "Player Stats" tab. Since the Datatable is initialized while hidden the initial column widths aren't calculated correctly. Using this API when you switch tabs should resolve the issue.

Kevin

burtmacklin31

@kthorngren thank you for the help! You're right, it was 100% because the table was initialized while it was hidden. I couldn't get it to work by adjusting the columns when the div was shown (columns.adjust() didn't seem to make a difference for me), but knowing the problem now, I just set my page to start with the "player stats" tab as the active one if the match has any stats to display, and that seems to be working fine.

Although, if the table is refreshed while the user has "lineups" selected, then I'll run into the same problem. But that's a risk I'm willing to take, haha.

Thanks again.