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

时间:2016-07-20 16:41:58

标签: javascript jquery datatables datatables-1.10

我试图做这样的事情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>
&#13;
&#13;
&#13;

以下是我的例子:

&#13;
&#13;
		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);
&#13;
.hide {
  display: none;
}
&#13;
<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>
&#13;
&#13;
&#13;

唯一的区别是serverSide选项。

问题:

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

2 个答案:

答案 0 :(得分:11)

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

要记住的一件事是,添加一行row.add()只会将其添加到JavaScript中的表中(即在客户端);如果表刷新,数据将不会添加到Ajax源并将消失。如果您希望能够在数据源中永久创建数据,则需要使用Editor extension到DataTables,遗憾的是,这些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代码的示例是要求某人基本上为您编写整个后端(更不用说我们不知道你当前的后端是什么样的,甚至是什么 language 。你现在问一个完全不同的问题。 Here is a link有关服务器端代码的要求和指南的文档,如果您想编写自己的代码(或者再次支付Editor并获得已经为您编写的后端,请从那里开始由C#或PHP中的插件的作者。

答案 1 :(得分:0)

让我为你解释为什么你无法做到这一点以及你能做什么:

  1. 服务器端(当您请求服务器处理数据并通过响应返回客户端时)将数据存储在服务器上的数据库或文件中并告诉您已完成。
  2. 客户端是javascript,它只是在浏览器中显示已发生的事情并且不接触服务器,例如显示已添加行的通知。
  3. 您正尝试通过javascript向浏览器(客户端)添加一行,并在选项中告诉数据表使用服务器端行添加。

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

    服务器端

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

    客户端

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

    1. 准备数据并使用ajax
    2. 将其发送到服务器
    3. 获得成功后,请使用相同的数据仅在客户端更新网格。
    4. 您还可以先将其添加到网格中,然后显示加载以告诉他们正在执行服务器端添加,然后如果失败则可以说重试链接重试上传到服务器。一些客户端应用程序将此用于浏览器存储,以便在再次建立连接时可以同步。

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