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

数据表向表中提供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 );

根据您的使用情况，您可能希望将其他选项作为重载函数的参数传入。我希望这有帮助！

ajax调用后重绘数据表

1 个答案: