我正在尝试使用提供的演示代码实现选择过滤器，但它不会过滤表格。
JS CODE
imsi_table = $('#imsi_table').DataTable({
"lengthMenu": [[7,-1],['Per Site','All']],
"iDisplayLength": 7,
"ordering": false,
"bLengthChange": true,
"bInfo": false,
"bFilter": false,
fixedHeader: {
header: true,
footer: true
},
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over this page
postPayTotal = api
.column( 2, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 2 ).footer() ).html(
postPayTotal
);
// Total over this page
prePayTotal = api
.column( 3, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 3 ).footer() ).html(
prePayTotal
);
// Total over this page
uknownTotal = api
.column( 4, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 4 ).footer() ).html(
uknownTotal
);
},
initComplete: function () {
this.api().columns('.multi-select-filter').every( function () {
var column = this;
console.log(column);
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
console.log(val);
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
}); // datatble end
HTML CODE
<div id="imsi_table_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
<div class="row">
<div class="col-sm-6">
<div class="dataTables_length" id="imsi_table_length">
<label>Show
<select name="imsi_table_length" aria-controls="imsi_table" class="form-control input-sm">
<option value="7">Per Site</option>
<option value="-1">All</option>
</select>
entries</label></div>
</div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-12">
<table id="imsi_table" class="table table-bordered table-inverse table-hover table-striped table-sm dataTable" role="grid">
<thead class="">
<tr role="row">
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 374px;">Site</th>
<th class="multi-select-filter sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Service</th>
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 182px;">PostPay</th>
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 161px;">PrePay</th>
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 179px;">Uknown</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>1</td>
<td>2G Voice</td>
<td>1839</td>
<td>575</td>
<td>583</td>
</tr>
<tr role="row" class="even">
<td>1</td>
<td>3G Voice</td>
<td>12311</td>
<td>563</td>
<td>943</td>
</tr>
<tr role="row" class="odd">
<td>1</td>
<td>2G SMS</td>
<td>618</td>
<td>321</td>
<td>239</td>
</tr>
<tr role="row" class="even">
<td>1</td>
<td>3G SMS</td>
<td>2849</td>
<td>400</td>
<td>358</td>
</tr>
<tr role="row" class="odd">
<td>1</td>
<td>2G Data</td>
<td>1765</td>
<td>96</td>
<td>3177</td>
</tr>
<tr role="row" class="even">
<td>1</td>
<td>3G Data</td>
<td>14345</td>
<td>892</td>
<td>2260</td>
</tr>
<tr role="row" class="odd">
<td>1</td>
<td>4G</td>
<td>1390</td>
<td>52</td>
<td>151</td>
</tr>
</tbody>
<tfoot>
<tr>
<th rowspan="1" colspan="1">Total Unique IMSIs</th>
<th rowspan="1" colspan="1">
<select>
<option value=""></option>
<option value="2G Data">2G Data</option>
<option value="2G SMS">2G SMS</option>
<option value="2G Voice">2G Voice</option>
<option value="3G Data">3G Data</option>
<option value="3G SMS">3G SMS</option>
<option value="3G Voice">3G Voice</option>
<option value="4G">4G</option>
</select></th>
<th rowspan="1" colspan="1">35117</th>
<th rowspan="1" colspan="1">2899</th>
<th rowspan="1" colspan="1">7711</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-5"></div>
<div class="col-sm-7">
<div class="dataTables_paginate paging_simple_numbers" id="imsi_table_paginate">
<ul class="pagination">
<li class="paginate_button previous disabled" id="imsi_table_previous"><a href="#" aria-controls="imsi_table" data-dt-idx="0" tabindex="0">Previous</a></li>
<li class="paginate_button active"><a href="#" aria-controls="imsi_table" data-dt-idx="1" tabindex="0">1</a></li>
<li class="paginate_button next disabled" id="imsi_table_next"><a href="#" aria-controls="imsi_table" data-dt-idx="2" tabindex="0">Next</a></li>
</ul>
</div>
</div>
</div>
答案 0 :(得分：1)
初始化tabla时，会显示"bFilter": false。此选项不允许搜索您的表格。
更改选项：
$('#imsi_table').DataTable({"bFilter": true});
结果：https://jsfiddle.net/cmedina/7kfmyw6x/39/
检查DataTable的参考：