jQuery - 在不重新加载/刷新的情况下将行添加到数据表

Question

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

这是我的代码

//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
            ] );
         });
      }
   });
}

Answer 1

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

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

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

我的解决方案是

1- 调用 .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)

谢谢☺

Answer 2

从文档中，

此方法将在内部将数据添加到表中，但不会在视觉上更新表显示以说明此新数据。

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

所以你的成功方法看起来像这样，

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