2017-05-04 98 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; 
      } 
     ); 
    }