使用jQuery动态更新DataTable内容

问题描述：

我有一个空tbody的HTML表格，它填充jQuery的功能选择一些过滤器（通常选择选项）填充。如果表格元素超出限制，DataTable用于分页。使用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？提前致谢！

您使用的是数据表Api吗？ –

http://stackoverflow.com/questions/27778389/how-to-manually-update-datatables-table-with-new-json-data可能的重复。 – TechnoCrat

答

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

    });

答

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

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

使用jQuery动态更新DataTable内容

相关推荐