How to hide the resizing of Datatables when refreshing the page?
How to hide the resizing of Datatables when refreshing the page?

When I refresh my page the following happens to Datatables:
Is there a way to hide this type of resizing on page refresh.
My DataTables settings look like:
$(document).ready(function(){
$('#playersTable').dataTable({
bAutoHeight: false,
responsive: true,
fixedHeader: true,
columnDefs: [
{ width: 20, targets: [0] },
{ width: 50, targets: [2, 3, 4] },
{ targets: [2,3,5], orderable: false }
]
} );
});
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Bump
Have you tried a style tag with containing the widths so they are applied as the page loads instead of waiting for the javascript to excute? The other thing I have done is set the table dislay:none until right before the $('#playersTable').dataTable({ is executed.
@bindrid how would I apply the style tags with the containing widths? Do I do something like:
<style>
display: none;
width: 1140px;
height: 421px;
</style>
try this, it is the easiest, add the style tag as shown below.
then add this to your code
If you don't already, make sure you have
width="100%"
on yourtable
element.Failing that, we would really need a link to a page showing the issue to be able to debug it.
Regards,
Allan