Responsive DataTable won't fit window after show() called

I’m hiding a table on the page with style="display: none" and showing the table using the initComplete api.

Here is the relevant JS code:

    <script>
        $(document).ready(function () {
            var table = new DataTable('#ResultsTable', {
                responsive: true,
                pageLength: 25,
                initComplete: function () {
                    $('#ResultsTable').show();
                    $('#ResultsTable').DataTable().columns.adjust().responsive.recalc();
                }
            });

        });
        $('#ResultsTable')
            .on('init.dt', function () {
                console.log('Table initialisation complete: ' + new Date().getTime());
                $('#ResultsTable').DataTable().columns.adjust().responsive.recalc();
            })
            .DataTable
    </script>

Neither method either in the initComplete funciton or in the .on(‘init.d’) function will redraw the table. But if I resize the window after it’s loaded the table will adjust to the window size as expected.

Using these versions of datatables:

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.bootstrap5.js"></script>
    <!-- Responsive Tables -->
    <script src="https://cdn.datatables.net/responsive/3.0.3/js/dataTables.responsive.js"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.3/js/responsive.bootstrap5.js"></script>

It’s a flask app with only a few pages and each page shows a different data table, I just want to be able to jump between pages and have the tables sized to the window properly instead of sending off the end.

You need to sign in to view this answers