jquery - 全局搜索列包含选择框的数据表

Question

我有一个 DataTable(使用 DataTables 1.10.12)，其中所有列都包含表单元素。其中 3 列包含选择框。使用全局搜索框时，它对于包含 input 或 textarea 元素的列按预期工作，但包含选择框的列未正确过滤。

例如，给定下表，如果我在搜索框中键入“internal”，我预计第二行会被过滤掉，因为“Scope”列中的值不是“internal”。

但是，没有任何行被过滤掉。我意识到这是因为 td 实际上确实以非选定选项的形式包含“内部”一词。

为了过滤这些列，我使用如下函数:

        /* Create an array with the values of all the select options in a column */
        $.fn.dataTable.ext.order['dom-select'] = function  ( settings, col )
        {
            return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
                return $('select', td).val();
            } );
        }

如何强制全局搜索框使用相同的逻辑来搜索包含选择框的列？

我知道可以使用搜索 API 添加具有自定义逻辑的单个列搜索框，但我需要使用此功能来处理全局搜索而不是单个列。

Here is a jsFiddle showing the issue

Answer 1

感谢@annoyingmouse，我能够找到一个解决方案，允许在选择框中搜索选定的值，同时仍然保留所有其他列的正常搜索功能:

Working jsFiddle

$.fn.dataTable.ext.search.push(
   function(settings, data, dataIndex) {
      var tdValues=[];
      var $tds=table.row(dataIndex).nodes().to$().find('td');
      $tds.each(function(){
         var $this=$(this);
         var hasSelect=$this.find('select').length >0; // check if current cell has a select box
         var curTdValue= hasSelect ? $this.find('option:selected').text() : $this.text();
         tdValues.push(curTdValue);
      });
      var rowValues=tdValues.join(' ');
      return !!~rowValues.toLowerCase().indexOf(table.search().toLowerCase()); 
   }     
);