Question

我正在使用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.."
        }       
    });
});

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

Answer 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
}

Answer 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);
}

jQuery ajax datatable显示旧数据几秒钟？

2 个答案: