是否可以通过数据属性过滤 jQuery DataTable? [英] Is it possible to filter a jQuery DataTable by data attribute?

问题描述

我想知道是否有可能通过其数据属性之一而不是其单元格的内容来过滤 jQuery DataTable.要将过滤器动态应用于列，请使用以下调用:

I was wondering if it is at all possible to filter a jQuery DataTable by one of its data attributes instead of the contents of its cells. To dynamically apply a filter to a column, one uses this call:

$table.fnFilter('^(Some value)$', columnIndex, true, false);

这将默认使用正则表达式过滤单元格的确切内容.但是，假设我的单元格的结构是这样的:

This will filter the exact contents of the cell by default using regex. However, assume that my cells are structured this way:

<td data-label="Active"><i class="fa fa-check fa-lg"></i></td>

或

<td data-label="Active">Active<br /><span class="mute">Some text</span></td>

我希望能够通过属性 data-label 的确切内容而不是单元格内容来使用 DataTable 过滤器.在表 init 上设置列时是否定义了搜索类型?或者有没有办法定义按属性而不是内容过滤?

I would like to be able to have the DataTable filter by the exact content of the attribute data-label instead of the cell contents. Is it a matter of defining the search type when setting up columns on table init? Or is there a way to define to filter by attribute instead of contents?

推荐答案

如果你想通过代码触发过滤器，创建一个自定义过滤器:

If you want to trigger the filter by code, create a custom filter :

$.fn.dataTable.ext.search.push(
   function(settings, data, dataIndex) {
      var dataLabel = table
          .row(dataIndex)         //get the row to evaluate
          .nodes()                //extract the HTML - node() does not support to$     
          .to$()                  //get as jQuery object 
          .find('td[data-label]') //find column with data-label
          .data('label');         //get the value of data-label
      return dataLabel  == 'Active'; 
   }     
);

演示 -> http://jsfiddle.net/x83zm7qq/

demo -> http://jsfiddle.net/x83zm7qq/

如果你只是想在用户在搜索框输入时使用data-label作为过滤的目标，你可以将data-label重命名为data-search 或 data-filter :

If you just want to be able to use data-label as the target of filtering when the user types in the searchbox, you can rename data-label to data-search or data-filter :

<td data-search="Active"><i class="fa fa-check fa-lg"></i></td>

dataTables 称之为正交数据.

dataTables calls it orthogonal data.

这篇关于是否可以通过数据属性过滤 jQuery DataTable?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！