2015-11-05 10 views
1

У меня есть данные, которые я хочу фильтровать, когда пользователь нажимает кнопку. Фильтр применяется к скрытому столбцу, описывающему, что представляет собой строка. Из того, что я понимаю, функция фильтра оценивает, следует ли возвращать строку или нет на основе условия.Datatables 1.10 функция фильтра

К сожалению, я не могу заставить работать. Вот код:

<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/

Благодаря

ответ

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 для кода и демонстрации.

+0

Спасибо, кучка @ Gyrocode.com, вы меня спасли. –

Смежные вопросы