使用 jquery 动态更新 DataTable 内容

Posted 2023-05-07

【中文标题】使用 jquery 动态更新 DataTable 内容

【英文标题】：Update the DataTable contents dynamically using jquery

【发布时间】：2017-04-15 18:02:37

【问题描述】：

我有一个带有空 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？提前致谢！

【问题讨论】：

你在使用datatables Api吗？

***.com/questions/27778389/… 的可能重复项。

【参考方案1】：

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

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

【参考方案2】：

您可以使用标准 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();

    );