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.