Question

根据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"]}

其中第一项是索引。

Answer 1

由于返回数据中缺少键，似乎可能会出现此问题。您是否尝试将数据作为关联数组返回，类似于：

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

然后您可以尝试替换：

rowId: 'Index',

使用：

rowId: 'index',

在ajax.reload（）之后，Datatables.js选择的行未保持选中状态

1 个答案: