jQuery ajax 数据表显示几秒钟的旧数据 - jQuery ajax datatable showing old data for some seconds for some moment?

jQuery ajax datatable showing old data for some seconds for some moment?

我正在使用jQuery Datatable来显示数据库中的数据。我正在使用 ajax 来获取数据。所以情况就像我有引导选项卡一样。因此，当用户单击任何选项卡时，它将显示与该选项卡相对应的数据。所以我的jQuery代码是这样的

$('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.."
        }       
    });
});

在这里，数据

表显示几秒钟的旧数据，之后它首次显示实际数据。当用户再次检查选项卡而不重新加载页面时，它会显示正确的数据。那么有人可以告诉我为什么会出现这个问题吗？如何解决此问题？任何帮助和建议都将非常可观。谢谢

Ajax 请求将需要一些时间才能在服务器上处理并返回。

您可以使用一些加载器来指示数据正在加载：

$('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
}

我检查了文档并得到了一些方法，例如fnDrawCallback和fnPreDrawCallback。还有一个例子真的帮助了我。

所以最后我的代码是这样的

$('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);
}