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

时间:2016-12-07 14:36:03

标签: jquery datatables html5-data

我的查询与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;
      }
    }
  );   

2 个答案:

答案 0 :(得分:1)

  

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

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

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

 }

您还可以对if

进行class检查
if ($(settings.nTable).hasClass('yourClass')) { 

}
  

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

您可以在回调中的settings变量中使用counter变量并将其组合使用。

enter image description here

所以你需要做的就是拥有这一行

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;
      }
    }
  }
);

答案 1 :(得分:0)

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

一旦我解决了这个问题,我就开始收到错误消息Requested unknown parameter '10' for row 0.查看DataTables documentation on this error并没有让我更聪明。

我做了一个解决方法,允许我在不使用data-属性的情况下过滤密钥。我在密钥的数据表中添加了一个额外的列,并为此列提供了具有th的{​​{1}}样式的tdcss元素。然后我像这样过滤了这个列的重复...

display: none;

虽然这个答案已经解决了我的问题,并且对于尝试做类似事情的人来说可能是一个很好的解决方法,但我不会将其标记为已接受的答案,因为我认为这个问题的正确答案是一个能够使用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; } } ); 中的data-attribute