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参见代码和示范。