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

来自documentation，

此方法将在内部向表中添加数据，但不会直观地更新表格显示以考虑这个新数据。

为了更新表的显示，请使用draw()方法，该方法可以简单地称为 row.add（）方法的链式方法＆＃ 39; s返回的对象。

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

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

Answer 2

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

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

我浪费了一个小时试图为这个非常古老的问题找到任何解决方案，即使在 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)

谢谢☺

jQuery - 在不重新加载/刷新的情况下向datatable添加行

2 个答案: