DataTables的row.add()在启用serverSide选项时无法运作

Question

我正在尝试实现类似于https://datatables.net/blog/2012-05-31的功能，但是我也在使用服务器端处理。

我的问题出现在添加新行部分。

这是我的示例，它无法正常工作：

  var t = $("#table").DataTable({
    "ajax": "https://api.myjson.com/bins/2k6e5",
    "serverSide": true,
    "autoWidth": false,
    "responsive": true,
    "ordering": true,
    "searching": true,
    "paging": true,
    "columns": [{
      data: "Id"
    }, {
      data: "Name"
    }, {
      data: "Actived"
    }]
  });

  var model = [{
    "Id": 4,
    "Name": "Name of the Object",
    "Actived": true
  }];
  console.log(model);
  t.rows.add(model).draw();

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
<table id="table" class="table table-striped">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Actived</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

这是一个有效的示例：

  var t = $("#tableRegistros").DataTable({
    "ajax": "https://api.myjson.com/bins/2k6e5",
    //"serverSide": true,
    "autoWidth": false,
    "responsive": true,
    "ordering": true,
    "searching": true,
    "paging": true,
    "columns": [{
      data: "Id"
    }, {
      data: "Name"
    }, {
      data: "Actived"
    }]
  });

  var model = [{
    "Id": 4,
    "Name": "Name of the Object",
    "Actived": true
  }];
  console.log(model);
  t.rows.add(model);

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
<table id="tableRegistros" class="table table-striped">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Actived</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

唯一的区别在于 serverSide 选项。

问题：如何在服务器端处理时使用 row.add()？

- Renatto Machado

---

新的行数据是来自服务器端还是通过JQuery添加的？ - mmushtaq

@user55，新的行数据来自jQuery。 - Renatto Machado

然后只需使用fnAddData和fnUpdate方法即可。 - mmushtaq

@user55 怎么做呢？你能在 http://jsfiddle.net/ 给我一个例子吗？ - Renatto Machado

Answer 1

TLDR; 你不能在服务端处理数据时使用row.add()。请阅读回答以了解替代方案。

需要注意的一点是，使用row.add()添加一行只会将其添加到JavaScript表格中（也就是客户端），如果刷新表格，数据将不会被添加到Ajax源并且会消失。如果要在数据源中永久创建数据，需要使用DataTables的Editor扩展，不幸的是，它是具有许可证且不像DataTables的其他部分免费（或自己编写服务器端CRUD处理程序）。

编辑：请查看服务器端文档，其中写道：

引用： 当使用服务端处理时，DataTables将为页面上信息的每个绘制（即分页、排序、搜索等）向服务器发出一个Ajax请求。

可能发生的情况是您添加了行，然后重新绘制了表格，这会向服务器发送请求，在那里找不到数据，因此不显示任何数据。您添加的新行在技术上已被添加，但随即被覆盖。不幸的是，如果是这种情况，在使用服务器端处理时，您将永远无法以这种方式添加行。 使用服务器端的整个目的是让 DataTables 不处理表中的数据操作，而是在服务器中进行操作，只允许 DataTables 显示数据。 编辑 2: （由于您要求更多细节）

请参见插件的作者发布的 此论坛帖子（关于您确切的问题），他在帖子中提到了此问题。

在服务端处理模式下，数据存储在服务器上。因此，在客户端添加行（请原谅我）是相当无意义的。SSP模式下的DataTables只是一个简单的显示和事件库。如果您需要添加一行，则需要将其添加到数据源（即服务器端），然后重新绘制表格。

通过使用服务器端处理，您放弃了在客户端JavaScript中使用row.add()添加行的能力。如果您想要它们出现，您必须将它们添加到服务器端。这将要求您使用Editor扩展程序或编写一些代码，向服务器端发送Ajax PUT或POST请求，然后编写服务器端处理程序来添加行。 编辑3：您一直在要求示例，但是要求服务器端CRUD代码的示例就等于要求别人为您编写整个后端（更不用说我们不知道您当前的后端看起来如何，甚至不知道它使用的是哪种语言）。您现在提出了完全不同的问题。这里是关于服务器端代码要求和指南的文档链接，如果您想自己编写代码，请从这里开始（或者再次付费使用Editor，并获得作者使用C#或PHP编写的已经编写好的后端）。

- Chris H.

---

我已经按照你的建议更新了代码，请再看一下。还没有生效！ - Renatto Machado

@RenattoMachado，我告诉你，如果不更新服务器端数据，你无法使其工作，因此你需要使用上面链接的编辑器扩展或编写自己的代码来处理它。 - Chris H.

@RenattoMachado 我添加了一条编辑说明row.add()如何与服务器端处理发生冲突。 - Chris H.

我明白了！但这只是我的问题：我该如何完成这项工作？我想要实际的例子。 - Renatto Machado

@RenattoMachado 我不知道我怎样才能更清楚地解释这一点。你不能在服务器端处理时使用row.add()。我的帖子中提到了替代方案，要么使用Editor扩展，要么编写自己的服务器端代码。要求一个特定的服务器端CRUD代码示例是一个完全不同的问题；这是很多代码，不是别人能够很快为你解决的事情。如果你不想这样做，请停止使用服务器端处理。就这么简单。 - Chris H.

Answer 2

让我为您澄清一下为什么您无法这样做以及您可以做什么：

1. 服务器端是（当您请求服务器处理数据并返回响应时）将数据存储在服务器上的数据库或文件中，并告诉您已完成。
2. 客户端是JavaScript，它只是在浏览器中显示某些内容已发生，并且不会触及服务器，例如显示通知行已添加。

您正在尝试通过JavaScript向浏览器（客户端）添加行，并在选项中告诉datatables使用服务器端行添加。

如果我理解正确，您想要的方式是去服务器存储数据，然后在客户端显示已添加的数据。现在，服务器端和客户端都可以工作。

服务器端

将选项设置为serverSide，然后在添加数据时使用适当的方法提供数据。这将触发对服务器的调用并返回。您可能需要在完成后刷新datatable，或者它可能会为您完成。这意味着再次从服务器获取所有数据以更新完整表格。您输入的数据可能位于第11行，而过滤器仅设置为10行，因此您的数据将进入下一页等。

客户端

大多数人都会执行以下步骤：

1. 准备数据并使用ajax将其发送到服务器
2. 当您获得成功时，仅在客户端上使用相同的数据来更新网格。

您还可以先将其添加到网格中，然后显示加载以告诉用户正在进行服务器端添加，如果失败，则可以提供重试链接以重试上传到服务器。一些客户端应用程序使用浏览器存储，因此它们可以在重新建立连接时进行同步。

不要尝试通过告诉datatables您想要发送服务器端数据但也想要使用客户端端添加行来混合客户端和服务器端方法。请使用上述方法之一。

- Farrukh Subhani