Why draw() doesn't always fire correctly in server-side processing table?

GhostCat

Hi,

I have a few tabs on my page and each tab has a datatable that is displayed when I click on that tab. All tables get their data from server-side processing, and I store the DT objects in a global "tables" array (f.e. tables[active], tables[expired] etc.).
When I click on a tab, its table is being initialized or drawn - if it has been already initialized before. Draw works correctly here.

There are certain cases, when I remove rows from the active table, which rows become members of an another table on another tab (f.e. when I send an element to the trash, that is actually an another tab). I do these changes with AJAX and when it's done, the currently active table should be redrawn. I said "should be" because sometimes it redraws correctly, but sometimes not. The process is successful, cause when I click on the other tab where I sent that data, it's there, but it doesn't want to disappear from the active table from where I removed it. I mean it doesn't want to disappear right after the successful AJAX call when I call draw() at the end within the AJAX success. But it redraws correctly if I click on an other tab and click back.

I noticed that when I reloads the page, in the currently active table - which has been initialized immediately on ready - this function works well and will also work after many tab redraws. But when I click on another tab and initialize another table, this function doesn't work there and will never work even after many tab redraws, only if I reloads the page when that tab is active.

I don't understand why draw() doesn't fire correctly in that cases and why it does in the others.

I use DataTables 1.10.10.

Here is my table initialization (it's within a longer function that returns oTable):

var oTable = $('#' + tablename).DataTable({
        "paging": true,
        "lengthChange": true,
        "searching": true,
        "ordering": true,
        "stateSave": true,
        "stateDuration": 60*60*24*7,
        "info": true,
        "autoWidth": true,
        "processing": true,
        "orderCellsTop": true,
        "order": [[order, 'desc']],
        "columnDefs": col_defs,
        "serverSide": true,
        "ajax": {
            "url": ajax_url
        },
        "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            $(nRow).attr('data-id', aData[0]);
            if (rowfunction !== undefined) {
                rowfunction(nRow,aData);
            }
        }
    }).on( 'stateSaveParams.dt', function (e, settings, data) {
        /* more functions will be added here later, that's the only reason why it's there */
    });

Tab click:

$(document).on('shown.bs.tab','#table-tabs a[data-toggle="tab"]', function (e) {

    var target = $(e.target).attr('aria-controls');

    if($.fn.DataTable.isDataTable('#'+target+'Table')){
        tables[target].draw();
    } else {
        showTable(target); // initialization
    }

    var url = window.location.pathname;
    var page_url = url.substr(0,url.indexOf("/messages"))+'/messages/'+target;
    history.replaceState(null, null, page_url);
});

An event when rows are being changed (removed) from current table:

$(document).on('click', '.dataTable .control-button', function (e) {

    e.preventDefault();
    e.stopImmediatePropagation();

    var url = $(this).data('url');

    $('#loading').show();

    $.ajax({
        url: '/customer/messages/'+url,
        dataType: "json",
        type: "POST",
        cache: false,
        success: function (response) {
            if(response < 1){
                tables[active_table].draw(); 
            } else {
                $('#error').show();
            }
            $('#loading').hide();
        },
        error: function (response) {
            $('#error').show();
            $('#loading').hide();
            console.log(response.responseText);
        }
    });

} );

Thanks in advance.

GhostCat

Meanwhile I got the answer:
I forgot to change the "active_table" global on tab change, so the draw actually worked, but I could not see while it was on the other tab.

allan

Hi,

I'd really need a link to a page showing the issue to be able to debug it I'm afraid. I don't immediately see the issue from the above code.

Allan