javascript - 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>

唯一的区别是服务器端选项。

问题:

如何在服务器端处理中使用 row.add()？

Answer 1

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

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

编辑:参见 server side documentation它说:

When using server-side processing, DataTables will make an Ajax request to the server for each draw of the information on the page (i.e. when paging, ordering, searching, etc.).

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

使用服务器端的全部意义在于，不让 DataTables 处理表中数据的操作，而是在服务器端处理，只允许 DataTables 显示数据。

编辑 2:(因为您要求提供更多详细信息)

参见 this forum post (关于您的确切问题)插件作者，他说:

When in server-side processing mode, the data store is at the server. So adding a row on the client-side (if you'll excuse me) is fairly pointless. DataTables in SSP mode is just a dumb display and events library. If you need to add a row, then you need to add it to the data source (i.e. at the server) and then just redraw the table.

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

编辑 3:您一直要求提供示例，但要求服务器端 CRUD 代码的示例基本上是要求某人为您编写整个后端(更不用说我们不知道您当前的后端是什么样子，甚至不知道它使用什么语言)。你现在问的是一个完全不同的问题。 Here is a link对于服务器端代码的要求和指南的文档，如果您想编写自己的代码(或者再次支付 Editor 并获得插件作者已经为您编写的后端) C# 或 PHP)。