添加行到datatable无需重新加载/刷新 - jQuery - Add row to datatable without reloading/refreshing

jQuery - Add row to datatable without reloading/refreshing

我正在尝试添加数据到DB，并使用ajax和jQuery数据表在同一页面显示这些数据，而无需重新加载或刷新页面。我的代码是保存和检索数据到/从数据库。但更新的数据列表不显示在datatable没有键入搜索框或单击表头。在加载页面时遇到同样的问题。

我的代码

//show data page onload              
$(document).ready(function() {
   catTable = $('#cat_table').DataTable( {
      columns: [
        { title: "Name" },
        { title: "Level" },
        { title: "Create Date" },
        { title: "Status" }
      ]
    });
    get_cat_list(); 
 });
//save new entry and refresh data list
$.ajax({
    url: 'category_save.php',
    type: 'POST',
    data:{name: name,level: level},
    success: function (data) {
       get_cat_list();
    },
    error: function (data) {
       alert(data);
    }
 });
//function to retrieve data from database
function get_cat_list() {
   catTable.clear();
   $.ajax({
      url: 'get_category_list.php',
      dataType: 'JSON',
      success: function (data) {
         $.each(data, function() {
            catTable.row.add([
                this.name,
                this.level,
                this.create_date,
                this.status
            ] );
         });
      }
   });
}

解决方案在这里 -为DataTable服务器端数据源启用

.draw()将导致您的整个数据表重新加载，假设您将其设置为显示100行，调用。row().add().draw()>Datatable将从服务器重新加载100行

我浪费了一个小时试图找到这个非常古老的问题的解决方案，即使在DataTable官方支持上也没有好的解决方案建议…

我的解决方案是

1- call .row().add()

2-不调用。draw()

3-你的行必须有一个Id标识符来使用它作为一个选择器(检查数据表的rowId设置)

4-调用。row().add()后，数据表将有行添加到它的本地数据

5-我们需要从数据表对象中获取这一行，并使用内置方法。node()

将其转换为HTML

6-我们将把结果HTML添加到表中:)

所有这些都可以在两行代码中完成

var rowData = someRowCreatedByAnAjaxRequest;
myDataTableObject.row.add(rowData);
$("#myTable-dt tbody").prepend(myDataTableObject.row(`tr#${rowData.Id}`).node().outerHTML)

由于☺

从文档中

该方法会在内部将数据添加到表中，但不会可视化地更新表显示，以说明这个新数据。

为了更新表的显示，使用draw()方法，它可以简单地作为row.add()方法返回对象的链接方法调用。

那么你的成功方法应该是这样的

$.each(data, function() {
   catTable.row.add([
        this.name,
        this.level,
        this.create_date,
        this.status
   ]).draw();
});