2017-05-04 100 views
0

我的表格包含三列; “名称”,“描述”和“状态”。我有一个下拉字段,用于过滤状态列上的表格。本质:如何在使用API​​进行搜索时忽略搜索字段?

$('.js-status-dropdown').dropdown({ 
    onChange: function (value) { 
     $('#dt').DataTable().column('status:name').search(value).draw(); 
    } 
}); 

这工作,但问题是标准的自由文本搜索输入字段包括在自由文本搜索领域的地位。

在状态字段上设置searchable: false导致下拉停止工作,因为Datatable忽略它。

{ 
    data: 'status', 
    name: 'status', 
    searchable: false // Stops table.column().search(value) from working :-(
} 

理想情况下,(标准)自由文本搜索字段应该忽略stuatus列,但下拉代码仍然应该工作。

+0

更多的代码需要 – Seabizkit

+0

是不是更好? –

+0

看看http://code.buzzword-cloud.com/post/2017/05/02/datatables-column-searching – Eric

回答

1

这工作:

  1. 将列searchable: false。这使得表格在自由文本搜索中忽略此列。
  2. 添加其使用原始行数据settings.aoData,代替数据数组的自定义搜索(它不包含由于1列)
  3. 重绘表的滤波下拉变化时。

代码:

$('#dt').DataTable(defaults) 
      .on('init.dt', statusHandling); 

    function statusHandling(e, settings, processing) { 

     // Redraw table on dropdown status change 
     $('.js-status-dropdown').dropdown({ 
      onChange: function (value) { 
       $(options.table).DataTable().draw(); 
      } 
     }); 

     // Our custom search function which adds an AND 'status = foo' condition 
     $.fn.dataTable.ext.search.push(
      function (settings, data, dataIndex) { 
       var input = $('input[name=status]').val().toLowerCase(); 
       // Use original data instead of 'data' because status is not searchable 
       var status = settings.aoData[dataIndex]['_aData']['status']; 
       return status.toLowerCase().indexOf(input) === 0; 
      } 
     ); 
    }