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

<强>样本

请参阅updated jsFiddle以获取代码和演示。

数据表1.10过滤函数

1 个答案: