Question

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

例如，如下表所示，如果我输入＆＃34;内部＆＃34;在搜索框中，我希望第二行被过滤掉，因为＆＃34;范围＆＃34;列不是＆＃34;内部＆＃34;。

但是，没有过滤掉任何行。我意识到这是因为td确实包含了单词＆＃34; internal＆＃34;以未选择的选项的形式。

为了过滤这些列，我使用这样的函数：

        /* 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()); 
   }     
);

Answer 2

这让我摸不着头脑： - ）

我想出了这个（JSFiddle）：

$.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('select')         //find column with data-label
      .val();                 //get the value of data-label
      return !!~dataLabel.toLowerCase().indexOf(table.search().toLowerCase()); 
   }     
);

但是，它取代了所有其他搜索，我对此并不满意。请不要接受这个作为正确的答案，等到有人提出更好的东西，因为我相信有人可以！

我期待看到解决方案！

Answer 3

好的，头脑发抖，但要注意这不是很漂亮：

(function() {
  $.fn.dataTable.ext.type.search.selected = function(data) {
    return !$(data).is("select") ? '' : $(data).val();
  };
})();
var table = $('#example').DataTable({
  "columnDefs": [{
    "orderDataType": "dom-select",
    "type": "selected",
    "targets": 2
  }]
});
/* 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();
  });
}
$("#example select").on("change", function() {
  var $this = $(this),
    index = null;
  var tableRow = table.row($this.parents('tr'));
  var rowDate = tableRow.data();
  $.each(rowDate, function(k, v) {
    if (v === $this.prop("outerHTML")) {
      index = k;
    }
  });
  var newRowData = rowDate.slice(0);
  var tempSelect = $(newRowData[index]);
  tempSelect.find("option[value!='" + $this.val() + "']").removeAttr("selected");
  tempSelect.find("option[value='" + $this.val() + "']").attr("selected", "selected");
  newRowData[index] = tempSelect.prop("outerHTML");
  table.row($(this).parents('tr')).data(newRowData).draw(true);
});

因此，我们保留您的排序功能，并在相关列中添加selected类型。 selected搜索返回select的值，但它只返回表初始化时的值。

为了解决这个问题，我们会听取表格中选择输入的更改，从行中获取数据，复制数据，操作副本并将其替换为原始位置，然后再次绘制表格。然后我们可以搜索新值。

这使得vanilla数据表全局搜索保持原样，但为其提供了正确的搜索数据。呼!!!!

希望有所帮助： - ）

全局搜索DataTable，其列包含选择框

Here is a jsFiddle showing the issue

3 个答案:

Working jsFiddle