jQuery ajax 数据表在几秒钟内显示旧数据？答案

【问题标题】：jQuery ajax datatable showing old data for some seconds for some moment?jQuery ajax 数据表在几秒钟内显示旧数据？
【发布时间】：2016-04-25 12:23:42
【问题描述】：

我正在使用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调用前datatable的内容是什么
也许您的请求尚未从服务器返回，而在处理请求时您仍然看到旧数据？
@VelimirTchatchevsky ajax调用前没有设置内容。
@Justinas 你能告诉我如何在我点击标签按钮后立即清除旧数据吗？
它向您显示上次访问的“本地存储”中的内容...浏览器可以加载本地副本（上次访问的网络副本）以更快地查看，然后检查是否有服务器和加载的副本之间的变化，如果是这样，它会更新，你应该不会注意到它，所以我想还有别的东西......我遇到了类似的问题，因为我使用 GET 而不是 POST 来请求数据...

标签： php jquery ajax datatables

【解决方案1】：

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
}

【讨论】：

ajax响应时如何去掉加载内容？
@NewUser 它应该覆盖当前表格内容。
不，它不是那样做的。我已经测试了代码。即使在 ajax 响应之后，它也会显示加载器行
感谢您对此问题的关注。我有解决办法。检查我的答案。

【解决方案2】：

我检查了文档并获得了一些方法，例如 fnDrawCallback 和 fnPreDrawCallback 。还得到了一个example，这对我很有帮助。

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

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

【讨论】：