How to prevent hidden tables from drawing until they become active.

chuckg

$(document).ready(function() {
    var table = $('#coep').DataTable( {
        "processing": true,
        "serverSide": true,
        "stateSave": true,
        "stateDuration": -1,
        "stateLoadParams": function (settings, data) {
            data.search.search = "";
            },
        "ajax": { "url": "/coep.php",
            "data": function (d) {
                d.CompanyID = <?php echo '"'.$companyID.'"'; ?>
                }
            },
        "pagingType": "input",
        "columns": [
            {
                "className":      'dt-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            null,
            null,
            {"orderable": false}
        ],
        "columnDefs": [
            {"targets":3, "width": "35%"},
            {"targets":1, "className": "dt-body-nowrap"}
        ],
        "ordering": true,
        "order": [[1, 'desc']],
        "search": { "return": true },
        "lengthMenu": [ 25, 50, 100 ]
    } );
    // Add event listener for opening and closing details
    $('#coep tbody').on('click', 'td.dt-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
    // recompute column widths on search
    table.on( 'search.dt', function () {
        table.columns.adjust();
    } );
    // recompute column widths on sort
    $('#coep').on( 'order.dt', function () {
        table.columns.adjust();
    } );
} );
$(document).ready(function() {
    var table = $('#covd').DataTable( {
        "processing": true,
        "serverSide": true,
        "stateSave": true,
        "stateDuration": -1,
        "stateLoadParams": function (settings, data) {
            data.search.search = "";
            },
        "ajax": { "url": "/covd.php",
            "data": function (d) {
                d.CompanyID = <?php echo '"'.$companyID.'"'; ?>
                }
            },
        "pagingType": "input",
        "order": [[0, 'desc']],
        "search": { "return": true },
        "lengthMenu": [ 25, 50, 100 ]
    } );
    // recompute column widths on search
    table.on( 'search.dt', function () {
        table.columns.adjust();
    } );
    // recompute column widths on sort
    $('#covd').on( 'order.dt', function () {
        table.columns.adjust();
    } );
} );

I thought I saw and answer to this question in forums but now I can't find it.

I have these two tables. They are under tab control so that only one can be seen at a time. On initial display, both tables are drawn. That means that a potentially unnecessary server side process is called and the hidden table has column sizes messed up because it doesn't know how to size them properly.

Is there a way to prevent triggering a table draw until it becomes visible?

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Is there a way to prevent triggering a table draw until it becomes visible?

You can use deferLoading to keep the server side data from being loaded on initialization. When the tab becomes visible you can perform a draw() to request the initial data.

the hidden table has column sizes messed up because it doesn't know how to size them properly.

Use columns.adjust() when the tab becomes visible. See this example with Bootstrap tabs.

Kevin

chuckg

Thanks.
That was an easy enough fix but I did have to add two things:
On the first page draw I had to selectively put "deferLoading: 0" on only one table otherwise there were no tables drawn.
Then I had to make the tab selection only do a draw on the deferred table once otherwise each tab would force an unnecessary redraw.