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

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

Do0msDAyDo0msDAy Posts: 3Questions: 1Answers: 0
edited May 2017 in Free community support

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

Answers

  • Do0msDAyDo0msDAy Posts: 3Questions: 1Answers: 0

    Bump

  • bindridbindrid Posts: 730Questions: 0Answers: 119

    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.

  • Do0msDAyDo0msDAy Posts: 3Questions: 1Answers: 0
    edited May 2017

    @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>

  • bindridbindrid Posts: 730Questions: 0Answers: 119
    Answer ✓

    try this, it is the easiest, add the style tag as shown below.

    <table id='layersTable' style='display:none'>
    

    then add this to your code

    $(document).ready(function(){
    
    // turn the table visible just before you run .DataTable()
    
        $('#playersTable').css("display","");
    
    
        $('#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 }
             ]
          } );
    });
    
  • allanallan Posts: 64,042Questions: 1Answers: 10,557 Site admin

    If you don't already, make sure you have width="100%" on your table element.

    Failing that, we would really need a link to a page showing the issue to be able to debug it.

    Regards,
    Allan

This discussion has been closed.