jQuery ajax datatable zeigt einige Sekunden lang alte Daten an?

Question

Ich verwende jQuery Datatable, um Daten aus der Datenbank anzuzeigen. Ich benutze Ajax, um die Daten zu bekommen. Die Situation ist so, dass ich Bootstrap-Registerkarten habe. Wenn der Benutzer also auf irgendwelche Registerkarten klickt, werden die Daten angezeigt, die der Registerkarte entsprechen. Also mein Code für jQuery ist wie diese

$('a.communication-data[data-toggle="tab"]').on('click', function(e) { 
    $('#get_communication').dataTable().fnDestroy();  
    var proj_id = $('input#user_project_id').val(); 
    var communicationTable = $('#get_communication').dataTable(); 
    $('#get_communication').dataTable({ 
     "processing": true, 
     "serverSide": true, 
     "bDestroy": true, 
     "iDisplayLength" : trans.show_rows, 
     "ajax": ajaxUrl+"?action=get_communication_history&proj_id="+proj_id, 
     language: { 
      searchPlaceholder: "Search.." 
     }  
    }); 
}); 

Hier wird die Datentabelle, die alten Daten für einige Sekunden zeigen und nach, dass es die aktuellen Daten zum ersten Mal zeigt. Wenn der Benutzer die Registerkarte erneut überprüft, ohne die Seite neu zu laden, werden die korrekten Daten angezeigt. Also kann mir jemand sagen, warum dieses Problem passiert? Wie behebe ich dieses Problem? Jede Hilfe und Vorschläge werden wirklich spürbar sein. Danke

Answer 1

ich die Dokumentation überprüft und bekam einige Methoden für das wie fnDrawCallback und fnPreDrawCallback. Habe auch eine example die mir wirklich geholfen hat.

So endlich ist mein Code wie dies

$('a.communication-data[data-toggle="tab"]').on('click', function(e) { 
    $('#get_communication_history').dataTable().fnDestroy(); 
    var proj_id = $('input#user_project_id').val(); 
    $('#get_communication_history').dataTable({ 
     "processing": true, 
     "fnPreDrawCallback": function() { 
      showMessage(); 
     return true; 
     }, 
     "fnDrawCallback": function() { 
     hideOverlay(); 
     },    
     "serverSide": true, 
     "bDestroy": true, 
     "iDisplayLength" : trans.show_rows, 
     "ajax": ajaxUrl+"?action=get_communication_history&proj_id="+proj_id, 
     "language": { 
      "searchPlaceholder": "Search..", 
     }  
    }); 
}); 

function showMessage() { 
    $('table#get_communication_history > tbody').html(""); 
    parentHtml = $('<tr><td colspan="5"><div class="communication-history-loading" style="text-align: center; font-weight: bold;">Please wait! Getting communication history..</div></td></tr>'); 
    $('table#get_communication_history tbody').html(parentHtml); 
} 

function hideOverlay() { 
    parentHtml = $('<tr><td colspan="5"><div class="communication-history-loading" style="text-align: center; font-weight: bold;">Please wait! Getting communication history..</div></td></tr>'); 
    $('table#get_communication_history > tbody').remove(parentHtml); 
} 

Answer 2

Ajax Anforderung dauert einige Zeit auf dem Server verarbeitet und zurückgegeben werden.

können Sie einige loader verwenden diese Daten, um anzuzeigen, Lade:

$('a.communication-data[data-toggle="tab"]').on('click', function(e) { 
    // Indicate that you are loading data 
    $('#get_communication').html('<tr><td>Loading...</td></tr>'); 

    // now do Ajax call 
}