Datatable in tabs not always responsive

Charli3

I have implemented two tabs containing one datatable each respectively. The code for each tab is exactly the same, it is only the data that is different. For some mind-boggling reason, the tables behave in different ways and neither is reliably responsive. The first tab is responsive on alternating clicks (once yes, once no) whereas the second tab is not responsive on the first click, then is always responsive. This result arose from adding responsive.recalc() to a timeout function, before doing this the tabs were not behaving responsively at all.

The code which links the tab to the tab functionality is the following:

    $('#test_history').on('shown.bs.tab', function (e) {
        if (test_table == null) {
            GET_test_history();
        }
        else {
                test_table.responsive.recalc();
        }
    });

This is the code for the initialization of the first datatable:

function init_test_datatable() {
        $.fn.dataTable.moment('DD/MM/YYYY');
        var unorderable_columns = [];
        var datefrom_dropdown_name = "disphist_filter_date_from";
        var dateto_dropdown_name = "disphist_filter_date_end";
        var date_change_draw_counter = { counter: 0 }; 
        var unorderable_columns = [2, 3];

        test_table = $('#test_table').DataTable({
                "dom": '<"row dt-filter-row"<"col-lg-3 col-md-4 col-sm-5 search-filter-container" f><"col-lg-9 col-md-8 col-sm-7 date_range_filters_container">>Bprtip',
                "aaData": testlist,
                "bPaginate": true,
                "pageLength": 50,
                "aoColumns": [
                    {
                        "className": 'details-control none td-no-right-border',
                        "orderable": false,
                        "mData": "test_details",
                        "defaultContent": '',
                        "searchable": true
                    },//0
                    {
                        "mData": "test_date",
                        "searchable": true,
                        "defaultContent": '',
                        "orderable": true
                    },//1
                    {
                        "mData": "test_descr",
                        "searchable": true,
                        "orderable": true,
                        "defaultContent": '',
                        "className": 'all left-align-td nowrap-column',
                    },//2
                    {
                        "mData": "test_entitled",
                        "orderable": false,
                        "defaultContent": '',
                        "className": 'center-align-td'

                    },//3
                    {
                        "mData": "test_amount",
                        "orderable": false,
                        "defaultContent": '',
                        "className": 'center-align-td'
                    },//4
                ],
                "order": [[1, "desc"]],
                "pagingType": "numbers",
                "language": {
                    "sSearch": search_label,
                    "emptyTable": no_data_string,
                    "lengthMenu": datatables_lengthMenu,
                    "info": datatables_info,
                    "infoFiltered": datatables_infoFiltered,
                    "infoEmpty": datatables_infoEmpty,
                    "zeroRecords": datatables_zeroRecords
                },
                "columnDefs": [
                    { "orderable": false, "targets": unorderable_columns }
                ],
                "buttons": [
                    {
                        text: '<i class="fa fa-filter-slash"></i><span class="toHideMax520">' + " " + ClearFilters_Button + '</span>',
                        action: function (e, dt, node, config) {
                            date_change_draw_counter.counter = 2;
                            $('#test_table' + '_wrapper .date-range-filter').datepicker('clearDates');
                            test_table.search("").draw();
                            $("#test_table_filter input").removeClass("active_filter");
                            $(".date-range-filter").removeClass("active_filter");
                        }
                    },
                    {
                        text: '<i class="fa fa-history"></i><span class="toHideMax520">' + " " + "Load Older History" + '</span>',
                        action: function (e, dt, node, config) {
                            //clear filters
                            date_change_draw_counter.counter = 2;
                            $('#test_table' + '_wrapper .date-range-filter').datepicker('clearDates');
                            test_table.search("").draw();
                            $("#test_table_filter input").removeClass("active_filter");
                            $(".date-range-filter").removeClass("active_filter");
                        }
                    },

                ]
            });
        $('#test_table').show(); //css is set as display:none initially 

        setTimeout(function () { test_table.responsive.recalc(); }, 1000);
}

HTML of the table is the following:

<div class="tab-content" style="padding-top:1em">
    <table id="test_table" class="table table-striped table-bordered dt-responsive" cellspacing="0" style="width:100%">
        <thead>
            <tr>
                <th>Test Details</th>
                <th>Test Date</th>
                <th>Test Item</th>
                <th>Test Entitled</th>
                <th>Test Amount</th>
            </tr>
        </thead>

        <tbody id="test_body"></tbody>
    </table>
</div>

Any help at all would be really appreciated!

Charli3

Posting because it might help someone, solved by adding both .rebuild() and .recalc()

so:

test_table.responsive.rebuild();
test_table.responsive.recalc();

Tester2017

I am using tabs with different tables. You don't need the rebuild(), at least I do not need this.

On tab toggling I am only calling:

        /*  Calls the responsive recalc function. */
        $($.fn.dataTable.tables(true)).DataTable().responsive.recalc();