Question

我有一个带有空tbody的HTML表，在选择一些过滤器（通常是选项）时会在jquery函数中填充。如果表元素超出限制，则DataTable用于分页。

首次应用过滤器时，它可以正常工作。但是当表内容由jquery更新时，DataTable似乎不会用新数据更新它。

HTML看起来像：

<table class="table table-striped table-hover outline" id="result" >
    <thead>
       <tr>
           <th>Name</th>
           <th>ID</th>
           <th>Age</th>        
           <th>Department</th>  
       </tr>
    </thead>
    <tbody>
    </tbody>
</table>

和Jquery函数：

$(document).ready(function(){

    function filterData(list) {

        /*filter and send updated list*/

        return list;
    }

    /* some other code */
    data = filterData(rawData); //Function will filter the data

    var html = ''; //html part to be appended in the results table

    data.forEach(function(d) {
        html += '<tr>'; //create a table row
        for (var key in d) 
            html += '<td>'+ d[key] +'</td>';   //put all elements in the columns
        html += '</tr>';     
    });

    $("#result tbody").html(html); //display the result in table body

    $('#result').DataTable({
        scrollY:"300px",
        lengthMenu: [10,15,20]
    });

});

使用新内容更新DataTable的任何可能方法？提前谢谢！

Answer 1

您可以使用标准DataTable API动态添加行。

var myDatatable = $('#result').DataTable({
        scrollY:"300px",
        lengthMenu: [10,15,20]
    });


data.forEach(function(d) {
     var html += '<tr>'; //create a table row
        for (var key in d) 
            html += '<td>'+ d[key] +'</td>';   //put all elements in the columns
        html += '</tr>';     

       // add row using standard API's and draw the table again
       myDatatable.row.add(html).draw();

    });

Answer 2

您需要在datatable中使用以下功能来更新表。

datatable.rows.add(newDataArray);
datatable.draw();

使用jquery动态更新DataTable内容

2 个答案: