javascript - 在ajax.reload()之后，Datatables.js选定的行未保持选中状态

根据says on the tin，Datatables应该能够“在重新加载数据时保留行选择”。但是当使用来自ajax的数据时，我无法使其正常工作。

这是我制作桌子的方式：

  oTable = $('#fileList').DataTable({
    select: true,
    "ajax": {
      "url": "./data.php",
      "type": "GET"
    },
    rowId: 'Index',
    "createdRow": function (row, data, dataIndex) {
      $(row).addClass(data[2]); //set formatting from data[2]
    }
  });

按照上面参考中的说明，我最初使用它每五秒钟刷新一次表：

setInterval(function () {
    oTable.ajax.reload();
}

但是任何选定的行将每五秒钟取消选择一次。因此，我尝试更加明确：将选定的行加载到数组中，然后在setInterval函数中重新选择它们：

setInterval(function () {
    var selectedRows = [];
    //put all the selected rows into an array:
    sel = oTable.rows('.selected').every(function (rowIdx) {
      selectedRows.push(rowIdx);
    });
    oTable.ajax.reload();
    console.log(selectedRows);
    //select all the rows from the array
    for (var i = 0; i < selectedRows.length; i++) {
      console.log("selecting ",selectedRows[i]);
      oTable.rows(selectedRows[i]).select();
    }
  }, 5000)
});

在控制台中，如果我有一个选定的行（在此示例中为第三行），我会看到：

Array [ 2 ]
selecting  2

符合预期，但是没有重新选择行。如果我在控制台中键入oTable.rows(2).select();，它将选择它应该选择的第三行，但是它在setInterval块中不起作用。

我猜想它可能与rowID属性有关。我已经用HTML定义了表格，如下所示：

      <table id="fileList" class="display">
        <thead>
          <tr>
            <th>Index</th>
            <th>Status</th>
            <th>Owner</th>
          </tr>
        </thead>
      </table>

并且数据来自一个php脚本，该脚本返回一个数组，例如

{"data":[["1", "foo", "bar"], ["2", "fuz", "baz"]}

其中第一项是索引。

最佳答案

似乎该问题可能是由于返回的数据中缺少键而引起的。您是否尝试过将数据作为关联数组返回，类似于：

"data": [
    {
        "index": 1,
        "status": "Foo",
        "owner": "Bar"
    }
]

然后，您可以尝试更换：

rowId: 'Index',

与：

rowId: 'index',

关于javascript - 在ajax.reload()之后，Datatables.js选定的行未保持选中状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42778443/