根据TR数据属性过滤jquery数据表

lvmkulzt  于 2023-03-01  发布在  jQuery
关注(0)|答案(2)|浏览(139)

我有一个查询与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;
      }
    }
  );
cpjpxq1n

cpjpxq1n1#

此过滤器应用于多个表,因此如果可能,它需要是当前正在过滤的任何表。每个表都有一个唯一的id,但共享一个class属性。
您需要进行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;
      }
    }
  }
);
4bbkushb

4bbkushb2#

我调试这个的努力被我 AJAX 函数阻碍了,如果在结果中检测到<tr>,我只添加返回的行到表中并重画,然而,由于我现在改变了<tr data-primarykey="...">的开头,它从来没有匹配,行从来没有被重画,所以过滤函数从来没有被调用。
一旦我修复了这个问题,我开始得到一个错误信息Requested unknown parameter '10' for row 0.看着DataTables documentation on this error没有让我更明智。
我做了一个变通方法,允许我在不使用data-属性的情况下过滤键。我为键添加了一个额外的列到datatable,并为该列的thtd元素指定了css样式,该样式具有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;
      }
    }
);

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

相关问题