在 datatables table 中查找和修改已过滤的行中的数据

Question

我动态生成了 tables，其中包含来自多个来源的数据。根据来源的不同，每个 table 的列数会有所不同。我正在构建一项功能，允许用户刷新来自各种来源的数据，仅更新相关行。

生成为 HTML 后，table 在 tr 元素中具有类以标识行的来源。我写了一些简化的代码，其工作方式与我的真实代码相同，用于刷新 this jsfiddle 中的 table，如下所示。

问题是，如果用户过滤 table（使用数据tables 过滤器），如果单元格在用户刷新数据时不可见，则不会更新.在示例代码中，如果您在行 ID 32 可见时按下刷新按钮，它将被更新。例如，如果您过滤 33 然后按下按钮，行 ID 32 将不会更新为新的随机值。请注意，这些是类，因为在真实情况下，有多个类可根据源和行 ID 提供唯一 ID - 多个行可能具有来自不同来源的相同 ID。

如何更新隐藏行的 HTML？根据示例代码，当我获取需要更新的数据时，我将知道行 ID，并且我将拥有一个与列顺序相同的新值数组（即数组位置 0 = td:nth- child(1))

$("table").dataTable();

$("#changeCell").on("click", function() {
$("tr.row-id-32 td:nth-child(1)").html("Val 32-1 NEW:"+Math.random());
$("tr.row-id-32 td:nth-child(2)").html("Val 32-2 NEW:"+Math.random());
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>

<button id="changeCell">Change row ID 32</button>

<table border=1>
<thead><tr><th>Col 1</th><th>Col 2</th></tr></thead>
<tbody>
  <tr class="row-id-32"><td>Val 32-1</td><td>Val 32-2</td></tr>
  <tr class="row-id-33"><td>Val 33-1</td><td>Val 33-2</td></tr>
  <tr class="row-id-34"><td>Val 34-1</td><td>Val 34-2</td></tr>
</tbody>
</table>

Answer 1

您可以使用 DataTables API 来定位您想要的行，无论该行当前是否显示，或者是否在另一个 DataTables 页面上。

步骤：

运行片段。
单击“更改行 ID 37”按钮。
导航到第 2 页以查看对行 ID 37 所做的更改。

$(document).ready(function() {

  var table = $('#example').DataTable( {
    "pageLength": 4
  } );

  $("#changeCell").on("click", function() {
    var node = table.rows('.row-id-37').nodes();
    $( node ).find('td:nth-child(1)').html("Val 37-1 NEW:"+Math.random());
    $( node ).find('td:nth-child(2)').html("Val 37-2 NEW:"+Math.random());
  });

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

    <button id="changeCell">Change row ID 37</button>

    <br><br>

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr><th>Col 1</th><th>Col 2</th></tr>
        </thead>
            <tbody>
                <tr class="row-id-32"><td>Val 32-1</td><td>Val 32-2</td></tr>
                <tr class="row-id-33"><td>Val 33-1</td><td>Val 33-2</td></tr>
                <tr class="row-id-34"><td>Val 34-1</td><td>Val 34-2</td></tr>
                <tr class="row-id-35"><td>Val 35-1</td><td>Val 35-2</td></tr>
                <tr class="row-id-36"><td>Val 36-1</td><td>Val 36-2</td></tr>
                <tr class="row-id-37"><td>Val 37-1</td><td>Val 37-2</td></tr>
                <tr class="row-id-38"><td>Val 38-1</td><td>Val 38-2</td></tr>
            </tbody>
    </table>

</div>

</body>
</html>

这在几个方面建立在您的逻辑之上：

它在初始化时将table分配给一个变量，因此我们可以访问数据表API:

var table = $('#example').DataTable();

在我的示例中，仅针对 testing/demo，我强制每个页面仅显示 4 行，以确保有一个“第 2 页”- 这是更新发生的地方。

它使用 DataTables API 到 select 使用 jQuery select 或：
的行
var node = table.rows('.row-id-37').nodes();

注意：因为它使用了class，所以可能会返回多个节点。鉴于您的 class 标识符是唯一的（我假设），您可能希望在 HTML.

中使用 ID 而不是 class

一旦你有了一个节点（或多个节点），你可以使用 jQuery 更新它（或它们）——就像你的代码一样。

使用 DataTables API 的好处是，这是存储所有数据的地方，而不管哪个子集恰好显示在 DOM/page 在任何特定时间点。

有关详细信息，请参阅 rows() and row-selector。

在 datatables table 中查找和修改已过滤的行中的数据

Finding and modifying data in rows that have been filtered in a datatables table

datatables