在 TR 数据属性上过滤 jquery 数据表

Question

我有一个与this question 相似但不同的查询。

不同之处在于我试图通过行而不是列上的数据属性进行过滤。 tr 元素，而不是 td 元素。这包含一个主键，我正在尝试删除重复项。重复的行可能在实际列数据中有所不同，所以我不能那样做。键是由下划线分隔的三个数字字段的组合。

<tr data-primarykey="12345678_12_34"><td>... 

然后，在页面加载时调用的 javascript 函数内...

  var rows = [];
  $.fn.DataTable.ext.search.push(
    function( settings, data, dataIndex, rowObj, counter ) {
      if(counter === 0) rows = [];

      // I want rowkey to be the data-primarykey attribute of the tr element
      var rowkey = table.row(dataIndex).data('primarykey');

      // If we've seen the row before (already in the array), filter it out.
      // Otherwise, return true and add it to the array
      if ($.inArray(rowkey,rows) > -1) return false;
      else {
        rows.push(rowkey);
        return true;
      }
    }
  );

我怀疑部分问题是table 对象没有在任何地方定义。此过滤器适用于多个表，因此如果可能，它需要是当前正在过滤的任何表。每个表都有一个唯一的id，但共享一个class 属性。

2016 年 12 月 12 日更新

我在使用实际数据属性的版本方面取得了一些进展。这个版本有一个工作的table DataTable 对象，我认为正确地获取了行并将其转换为 jquery。但是，尝试在undefined 中获取数据属性。

$.fn.DataTable.ext.search.push(
    function( settings, data, dataIndex, rowObj, counter ) {
      if(counter === 0) rowkeys = [];

      // I want rowkey to be the data-primarykey attribute of the tr element
      var tableID = $(settings.nTable).attr("id");
      var table = $('#'.tableID).DataTable(); // Correct DataTable
      //var row = table.rows(dataIndex).nodes().to$(); // Correct row?
      var rowkey = table.rows(dataIndex).nodes().to$().data("primarykey");
      console.log('key: '+rowkey); // Shows 'key: undefined' in console.

      // If we've seen the row before (already in the array), filter it out.
      // Otherwise, return true and add it to the array
      if ($.inArray(rowkey,rowkeys) > -1) return false;
      else {
        rowkeys.push(rowkey);
        return true;
      }
    }
  );   

Answer 1

此过滤器适用于多个表，因此如果可能，它需要是当前正在过滤的任何表。每个表都有一个唯一的 id，但共享一个类属性。

您需要检查if 以限制您的过滤器仅适用于指定的表。

 if (settings.nTable.id === "yourTableId" || settings.nTable.id === "anotherTableId") { 

 }

您也可以在class 上进行if 检查

if ($(settings.nTable).hasClass('yourClass')) { 

}

// 我希望 rowkey 是 tr 元素的 data-primarykey 属性

您可以在回调中使用 settings 变量并结合使用 counter 变量来获得它。

所以你需要做的就是拥有这条线

var rowkey = $(settings.aoData[counter].nTr).data('primarykey');

这是一个 Working example，我在其中使用了这个过滤器逻辑。

注意：上面的例子有一个静态 HTML 表格，我认为这不是问题，因为我们更专注于 filter 逻辑。此外，过滤器仅在您在搜索框中输入内容时才起作用。

所以最终的逻辑如下所示

var rows = [];

$.fn.dataTableExt.afnFiltering.push(
  function(settings, data, dataIndex, rowObj, counter) {
    if (settings.nTable.id === "yourTableId") {   // change (1)
      if (counter === 0) rows = [];

      // I want rowkey to be the data-primarykey attribute of the tr element
      var rowkey = $(settings.aoData[counter].nTr).data('primarykey'); // change (2)

      // If we've seen the row before (already in the array), filter it out.
      // Otherwise, return true and add it to the array
      if ($.inArray(rowkey, rows) > -1) return false;
      else {
        rows.push(rowkey);
        return true;
      }
    }
  }
);

Answer 2

我的 ajax 函数阻碍了我的调试工作，仅在结果中检测到 <tr> 时将返回的行添加到表中并重绘。但是，由于我现在将开头更改为 <tr data-primarykey="...">，因此它永远不会匹配，因此永远不会重绘行，因此永远不会调用过滤器函数。

修复此问题后，我开始收到一条错误消息 Requested unknown parameter '10' for row 0.

我做了一个解决方法，允许我在不使用 data- 属性的情况下过滤键。我在数据表中为键添加了一个额外的列，并为此列的th 和td 元素赋予了具有display: none; 的css 样式。然后我像这样过滤了此列上的重复项...

var rowkeys = [];

$.fn.DataTable.ext.search.push(
    function( settings, data, dataIndex, rowObj, counter ) {
      if(counter === 0) rowkeys = [];
      // I want rowkey to be the data-primarykey attribute of the tr element
      var rowkey = data[11] || '';

      // If we've seen the row before (already in the array), filter it out.
      // Otherwise, return true and add it to the array
      if ($.inArray(rowkey,rowkeys) > -1) return false;
      else {
        rowkeys.push(rowkey);
        return true;
      }
    }
);

虽然这个答案已经解决了我的问题，并且对于尝试做类似事情的人来说可能是一个很好的解决方法，但我不会将其标记为已接受的答案，因为我认为这个问题的正确答案是能够在tr 中使用data-attribute。