0
540
ViewsHeaders on a DataTables table collapses until a redraw of some sort occurs. Is there a way to force the headers to be redrawn or something similar?
My table is being initialized in this way:
distributorsDistributionAreasTable = $('#id').DataTable({
pageLength: 10,
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
scrollY: '160px',
scrollCollapse: true,
searching: true,
});
The table is in a modal dialog. When the dialog loads, the columns collapse to the left. But if I resize the window or click a column, they fix themselves. See the gif. Any ideas what's going on here or how to fix it?
1 answers
Answer question0
This is a responsiveness issue with DataTables.
I would recommend the following to resolve the issue:
1.) Add these scripts/stylesheets into your HTML
<script src ="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
After you have linked those, in your table initialization, add the following: responsive: true, anywhere above your scrollY option.
Per the DataTables site, If you are using vertical scrolling (scrollY) and not horizontal scrolling (scrollX), enable the horizontal scrolling option so the table has space to scroll into. scrollX: true,
After you enable the scrollX option, add the following to your CSS stylesheet:
table.dataTable tbody th,
table.dataTable tbody td {
white-space: nowrap;
}
If that doesn't completely solve the issue, after the table is drawn, you can call this to readjust the column(header) sizes.
table.columns.adjust().draw();
});
All in all, it should look something like this:
distributorsDistributionAreasTable = $('#id').DataTable({
responsive: true,
pageLength: 10,
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
scrollY: '160px',
scrollX: true,
scrollCollapse: true,
scroller: true,
searching: true,
});
distributorsDistributionAreasTable.columns.adjust().draw();
});
table.dataTable tbody th,
table.dataTable tbody td {
white-space: nowrap;
}