Datatables 1.10過濾器函數

Question

我有一個數據表，當用戶點擊一個按鈕時，我想過濾。該過濾器適用於描述行所關於的隱藏列。 據我所知，過濾器函數根據條件評估是否應該返回該行。

不幸的是我似乎無法讓它工作。 下面是代碼：

<table id="detail-datatable" class="table table-striped table-hover"> 
<thead> 
    <tr> 
     <th>Type</th> 
     <th>Criticity</th> 
     <th>Contract</th> 
     <th>Item</th> 
     <th>Parent</th> 
     <th>Status</th> 
     <th>Condition</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>alert</td> 
     <td><span class="label label-warning">Warning</span> 
     </td> 
     <td>DBS-XXX-0001</td> 
     <td><i class="fa fa-hdd-o"></i> /u01</td> 
     <td><i class="fa fa-server"></i> Server2</td> 
     <td> 
      <div class="font-bold text-warning">95.12%</div> 
     </td> 
     <td>Pct Used 
      < 95%</td> 
    </tr> 
    <tr> 
     <td>alert</td> 
     <td><span class="label label-danger">Critical</span> 
     </td> 
     <td>DBS-XXX-0001</td> 
     <td><i class="fa fa-hdd-o"></i> /u02</td> 
     <td><i class="fa fa-server"></i> Server1</td> 
     <td> 
      <div class="font-bold text-danger">98.2%</div> 
     </td> 
     <td>Pct Used 
      < 95%</td> 
    </tr> 
    <tr> 
     <td>dnd</td> 
     <td><span class="label label-danger">Critical</span> 
     </td> 
     <td>DBS-XXX-0001</td> 
     <td><i class="fa fa-database"></i> DB01</td> 
     <td><i class="fa fa-server"></i> Server3</td> 
     <td> 
      <div class="font-bold text-danger"><i class="fa fa-chevron-down"></i> 
      </div> 
     </td> 
     <td>UP</td> 
    </tr> 
</tbody> 

的JavaScript：

$('#detail-datatable').dataTable({ 
"dom": 'lfrti', 
    "autoWidth": false, 
    "columnDefs": [{ 
    "targets": [0], 
     "visible": false, 
     "searchable": true 
}], 
}); 


$('#show-alerts').click(function() { 
     UpdateDetailTable('alert'); 
}); 

//Update the Detail table 
function UpdateDetailTable(filter) { 

    NewData = FilterDetailedStatus(filter); 
    var table = $('#detail-datatable').DataTable(); 
    table.rows().remove(); 
    table.push(NewData); 
    table.draw(); 
} 

// function to filter data in the detailed status datatable 
function FilterDetailedStatus(filter) { 

//Load table with new API in a variable 
var table = $('#detail-datatable').DataTable(); 

//filter the data and return it in a new instance 
var filteredData = table.column(0).data().filter(function (value, index) { 
    return value == filter ? true : false; 
}); 
return filteredData; 
} 

http://jsfiddle.net/d2k9dh64/2/

感謝

Answer 1

解決方案

使用column().search()來搜索特定列中的數據。

例如：

$('#show-alerts').click(function() { 
    FilterDetailedStatus('alert'); 
}); 

// function to filter data in the detailed status datatable 
function FilterDetailedStatus(filter) { 
    //Load table with new API in a variable 
    var table = $('#detail-datatable').DataTable(); 

    table.column(0).search(filter).draw(); 
} 

DEMO

updated jsFiddle參見代碼和示範。