jquery tabs and datatable page issue with server-side

jquery tabs and datatable page issue with server-side

mimikomimiko Posts: 6Questions: 1Answers: 0

Hello.
I use jquery tabs to display different tables in each tab. After initializing tables, which get data from server via ajax, the first displayed tab shows: Showing 1 to 17 of 539 entries
All other tables which currently is hidden loads data (I see this in console and html structure inspector).
But the problem consist in that on hidden tables datatable can't correctly calculate how many rows fit in the view ('scrollY': '60vh'), so when I switch to any of those tabs, datatable shows: Showing 1 to 2 of 161 entries
Total number of entries differ from tab to tab, but number of rows, which datatable thinks is fitting is always 2, except the first initial visible tab, despite the fact that the view is full with rows.
This arise the problem that I cannot scroll to last entry, for example it will be: Showing 145 to 147 of 161 entries
And its impossible to scoll to show remainint rows.

$('.tabbed').tabs({
    collapsible: true,
    activate: function( event, ui ) {
        $.fn.dataTable.tables( { visible: true, api: true } ).draw().columns.adjust();
    },
});
$('.tabbed table').DataTable({
        'scrollY': '60vh',
        'autoWidth': false,
        'lengthChange': false,
        'paging': true,
        'pagingType': 'full_numbers',
        'info': true,
        'deferRender': true,
        'deferLoading': 0,
        'processing': true,
        'responsive': false,
        'scroller': {
            'loadingIndicator': true,
            //'boundaryScale': 0.9,
            //'displayBuffer': 3,
        },
        'serverSide': true,
        'ajax': function (data, callback, settings) {
            var api = new $.fn.dataTable.Api( settings );
            var table = $(api.table().node());
            data.t = table.data('t');
            data.qid = table.data('qid');
            $.ajax({
                url: '?det_data.php',
                type: 'POST',
                data: data,
                success:function(data){
                    data = jQuery.parseJSON(data);
                    table.closest('.ui-tabs').find('*[aria-controls="'+(table.closest('.ui-tabs-panel').attr('id'))+'"]').find('span').html(' ( <span>'+data.recordsFiltered+'</span> )');
                    callback(data);
                },
            });
        },
    });
This discussion has been closed.