ajax调用后重绘数据表

Question

我有一个带有过滤器的数据表。我每 10 秒使用一次 Ajax 来获取新数据并向表中添加新行。 （表格数据在同一页面中是动态的，不是ajax）

$(function () {
    setInterval(checkNew,1000*10);

    $( "#orderdate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '2013:2050',
        dateFormat:"dd-mm-yy",
        showAnim:"fold"
    });

    var table = $('#data').DataTable({
        "lengthMenu": [[-1], ["All"]],
        "bSort": false,
        "paging":   false,
    });

    $("#status").change(function() { table.column(4).search($(this).val()).draw() });

});

function checkNew(){
    $.post('getdata.php',{max: $("#lastid").text().trim() }).done(function (data) {
        if( data.trim() !== '' ) {
            $("table#data").prepend(data.trim());
            //need to draw datatable to filter and search new data added to the table
        }
    });
}

如您所见，我正在尝试使用新数据更新或绘制表格，以便过滤或搜索它们。如果我搜索新数据，它不会显示，因为它没有加载 DOM。但我无法重绘我尝试过的表格

$("table#data").DataTable().draw(); // new rows are added but can't be searched or filtered

还有

$('table#data').dataTable().fnDraw(); //new rows are not added

那么无论如何如何编辑代码以正确绘制表格以过滤和搜索新添加的数据？

Answer 1

Datatables 将built-in functionality for handling loading data from an ajax request 提供到表中。此外，它还提供了一个reload 方法来刷新表中的数据。

在您的情况下，您应该能够执行以下操作：

var table = $('#data').DataTable( {
    ajax: "getdata.php"
});

然后：

setInterval( function () {
    table.ajax.reload();
}, 10000 );

根据您的用例，您可能希望将其他选项作为参数传递给 reload 函数。我希望这会有所帮助！