DataTables row.add() 不适用于 serverSide 选项

Posted 2023-05-07

技术标签:

【中文标题】DataTables row.add() 不适用于 serverSide 选项【英文标题】：DataTables row.add() doesn't work with serverSide option 【发布时间】：2016-11-23 23:36:11 【问题描述】：

我正在尝试做这样的事情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()？

【问题讨论】：

新的行数据是来自服务器端还是通过JQuery添加？ @user55 新行数据来自 jQuery。然后简单地使用 fnAddData 和 fnUpdate 方法。 @user55 怎么做？你能给我一个例子吗？在jsfiddle.net 【参考方案1】：

TLDR; 您不能将row.add() 用于服务器端处理。阅读替代方案的答案。

要记住的一点是，使用row.add() 添加一行只会将其添加到 javascript 中的表中（即在客户端）；如果表被刷新，数据将不会被添加到 Ajax 源中并且会消失。如果您希望能够在数据源中永久创建数据，则需要使用 Editor extension 到 DataTables，不幸的是，它是许可的，不像其他 DataTables 那样免费（或编写您自己的服务器端 CRUD 处理程序)。

编辑：查看server side documentation，上面写着：

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

可能发生的情况是您的行被添加，然后表格被重绘，这向服务器发送了一个请求，在该服务器上找不到数据，因此它不显示任何数据。您添加的新行在技术上已添加，但随后立即被覆盖。不幸的是，如果是这种情况，您将永远无法在使用服务器端处理时以这种方式添加行。

使用服务器端的重点是不让 DataTables 处理表中数据的操作，而是在服务器中执行此操作，只允许 DataTables 显示数据。

编辑 2：（因为您要求提供更多细节）

请参阅插件作者的this forum post（关于您的确切问题），他说：

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

通过使用服务器端处理，您放弃了在客户端使用row.add() 在 JavaScript 中添加行的能力。如果你想让它们出现，你绝对必须在服务器端添加它们。这将要求您使用 Editor extension 或编写一些代码，将 Ajax PUT 或 POST 请求发送到服务器端，然后使用服务器端处理程序来添加行。

编辑 3： 您一直要求示例，但要求提供服务器端 CRUD 代码示例实际上是要求某人为您编写整个后端（更不用说我们不知道您当前的后端是什么样子，甚至不知道它是什么语言）。你现在问的是一个完全不同的问题。 Here is a link 到服务器端代码的要求和指南的文档，如果你想编写自己的，从那里开始（或者，再次支付Editor 并获得已经由作者为你编写的后端C# 或 php 中的插件）。

【讨论】：

我已根据您的建议更新了我的代码，请再次查看。还不行！在第二个例子中，我没有调用“.draw()”，但是它的工作原理。我已经知道了。但我的问题是：我怎样才能做到这一点？ @RenattoMachado 我告诉你，如果不更新服务器端数据，你就无法完成这项工作，所以你要么需要使用上面链接的编辑器扩展，要么编写自己的代码来处理它。 @RenattoMachado 我添加了一个编辑以进一步解释row.add() 与服务器端处理的冲突。【参考方案2】：

让我来告诉你为什么你不能这样做以及你能做什么：

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

您正在尝试通过 javascript 向浏览器（客户端）添加一行，并且在选项中您告诉数据表使用服务器端行添加。

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

服务器端

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

客户端

大多数人都会执行这些步骤

准备数据并使用 ajax 将其发送到服务器成功后，仅在客户端使用相同的数据更新网格。

您也可以先将其添加到网格，然后显示加载以告诉他们它正在执行服务器端添加，然后如果失败，您可以说重试链接以重试上传到服务器。一些客户端应用程序将此与浏览器存储一起使用，以便在再次建立连接时进行同步。

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

【讨论】：