datatables - 消除 DataTables.net 中的重复行

Question

上下文:我有一个 Web Worker，它通过 WebSocket 从后端“订阅”数据更新，然后将其发布到通过 DataTables.net 呈现的 View 中。为了提高效率，添加的数据作为部分记录(即仅一行)。

由于数据与 DataTable 分离(即它不使用 Ajax API；它基本上是 JavaScript 源)，因此我不能只添加行并呈现表。如果触发同一行的两次推送，我最终会得到重复的行。

所以，我制作了一个小插件:

$.fn.dataTable.Api.register('deDupe', function (dataSet, idColumn) {
  idColumn = idColumn || 0;
  var columnData = this.columns().data()[idColumn];

  for(var i=0; i < dataSet.length; i++) {
    var thisId = dataSet[i].id;
    var matchedIndex = columnData.indexOf(thisId);
    if(matchedIndex > -1) {
      var matchedRow = $(this.rows().nodes()[matchedIndex]);
      this.row(matchedRow).remove();
    }
  }

  // return "this" for chaining
  return this;
});

(不要 mock 我在老式的“for”循环中寻求安慰!)

然后在使用中，我这样做:

myTable.deDupe(dataSet).rows.add(dataSet).draw();

接收数据然后更新表的方法已经有传入行，该行包含在“dataSet”中，然后我传递该列的 COLUMN 索引，该索引包含用于重复数据删除的唯一 ID目的。请注意，在代码执行中，我不是删除传入的重复项，而是删除前一行，然后添加传入的行。有些情况下，该行包含更新的数据，而我实际上只关心ID级别的重复数据删除，而不是内容级别......总是只是盲目地使用最新数据。

有几个问题:

1. 有更好的方法吗？我很想看到一个核心选​​项，但我没有遇到。这似乎是相对常见的功能。我是不是疯了，重新发明轮子？ (换句话说，一个初始化选项？)

2. 在条件检查是否存在匹配项时，您会看到这一行: var matchesRow = $(this.rows().nodes()[matchedIndex]); 这让我印象深刻很奇怪，但我无法理解识别要在 .remove() 链中使用的行的其他方法。在我看来，我已经知道该行的索引，所以我认为像 matchedRow = this.rows(matchedIndex) 这样的东西会起作用，但我找不到它或类似的东西。因此，我不仅深入研究 rows().nodes()，而且将整个内容封装在 jQuery 中，然后再传递到 .row(matchedRow)'。它看起来是如此的嵌套和包裹，我觉得我应该已经可以直接访问。

别误会我的意思；代码“有效”并修复它可能是一个微观优化。但它让我觉得非常复杂，并且给我带来了一些代码味道，为了维护开发人员的利益，我想避免这种情况。

Answer 1

正如您所说，这可能是一个微观优化，但一个选项可能是选择所有行并将它们全部删除。

$.fn.dataTable.Api.register('deDupe', function (dataSet, idColumn) {

  idColumn = idColumn || 0;

  // Get the possible dataSet ids into an array for easier lookup
  var dsIds = dataSet.map( (d) => d.id );

  // Use a function in the rows() API to obtain all rows with
  // a value in the idColumn that matches one of the incoming
  // ids on the dataSet
  var matchedRows = this.rows( (i,r) => dsIds.indexOf(r[idColumn]) > -1 );

  // Remove all of the rows at once (this could be chained to the selector above)
  matchedRows.remove();

  // return "this" for chaining
  return this;
});

参见row-selector:Function reference