是否可以按数据属性过滤 jQuery DataTable？

Question

我想知道是否完全可以通过其数据属性之一而不是其单元格的内容来过滤 jQuery DataTable。要动态地将过滤器应用于列，可以使用此调用：

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

默认情况下，这将使用正则表达式过滤单元格的确切内容。但是，假设我的单元格是这样构造的：

<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。在 table init 上设置列时是否定义搜索类型？或者有没有一种方法可以定义按属性而不是内容进行过滤？

Answer 1

如果您想通过代码触发过滤器，请创建自定义过滤器：

$.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/

如果您只是希望能够在用户输入搜索框时使用data-label作为过滤目标，您可以将data-label重命名为data-search或[=15] =]：

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

dataTables 称它为 orthogonal data。

Answer 2

您还可以定义一个 per-table 自定义回调，方法是将其存储在 initComplete 回调中的 "settings" 中，然后在公共搜索处理程序下从实例的 "settings" 对象调用。这是代码：

$(function(){
  // the common/unified plugin (for all datatables)
  $.fn.DataTable.ext.search.push(
        function(settings, columnsOutput, dataIndex, data, outputIndex) {
          // this = ext.search array (all custom search functions (including this one)
          if (settings._myFilter){
              return settings._myFilter.call(settings, {
                  data: data,
                  dataIndex: dataIndex,
                  outputIndex: outputIndex,
                  columnsOutput: columnsOutput,
                  settings: settings
              });
          } else {
              return true;
          }
      }
      );

  // exact datatable initialization
  var dTable = $("#example").DataTable({
    // some sample data
    data: [{name: "John"}, {name: "Jack"}, {name: "Andy"}],
    columns: [{data: 'name'}],
    // setting our custom function under the initComplete callback
    initComplete: function(settings, json) {
      settings._myFilter = function(info){
        if ($('#jFilter').prop('checked')){
          return (info.data.name.toLowerCase().indexOf('j') >= 0);
        } else {
          return true;
        }
      }
    }
  });
  
  $('#jFilter').on('click', function(){
    dTable.draw(); // redraw will apply all the filters
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet"/>

<h2>Click checkbox below to filter by data using a callback</h2>
<label><input id="jFilter" type="checkbox"> J only</label>

<table id="example">
</table>

Answer 3

var detailDT = $("#staging-detail-table").DataTable();

var selectedHeaderId = $(...).click...

$.fn.dataTable.ext.search.push(
       function (settings, searchData, dataIndex, rowData) {

            // This is a global call-back, so check what table is getting sent thru
            // for different search logic.
            // This is triggered any time any table is re-drawn.

            // Detail grid
            if (settings.nTable.id == "staging-detail-table") {
                if (!selectedHeaderId) {
                    // no header was selected. show everything
                    return true;
                } else {
                    var $trDetailDT = $(detailDT.row(dataIndex).node());
                    var headerId = $trDetailDT.data("headerid");

                    return selectedHeaderId == headerId;
                }
            }

            return true; // it wasnot the staging data table. Don't filter/limit.
        }
)

detailDT 是对我要筛选的 DataTable 的引用。

selectedHeaderId 是我要过滤的值 - 在调用触发搜索的 detailDT.draw() 之前会由其他一些 jQuery 用户交互等设置。

关键部分是调用 $(detailDT.row(dataIndex).node());，它使用当前行的回调参数 dataIndex。这基本上是将行放入普通 jQuery 对象以获取数据属性等

Answer 4

我来晚了一点，但我看到了另一个可以简化这个问题的解决方案：在 HTML 中：选择一列来过滤您的数据：（我选择第一列）

<td><div data-filter="filter1" >...</div></td>

在 JS 中：

 $.fn.dataTable.ext.search.push( (settings, data, dataIndex, rowData ) =>{ 
            var row=$(rowData[0]); 
            var filterData = $(rowData[0]).attr('data-filter');
            return filter === 'filter1';
           });

是否可以按数据属性过滤 jQuery DataTable？

Is it possible to filter a jQuery DataTable by data attribute?

jquery

datatables