jQuery Datatables:单个列搜索不起作用
jQuery Datatables: Individual column searching not working
我已经包含了此链接中的代码:https://datatables.net/examples/api/multi_filter.html
但它不能正常工作。搜索框会显示,但在搜索框中键入详细信息时,数据不会加载。我将发布我的文件中包含的代码。请看一看并核实。
任何帮助都将不胜感激。非常感谢。
代码
<div class="col-md-12" style="max-height:300px; display:block; overflow:auto;" >
<table id="big_table" class="table table-striped display table-bordered">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
</tr>
</tfoot>
<tbody>
<?php foreach($array as $arr) { ?>
<tr>
<td><?php echo $arr->column_1; ?></td>
<td><?php echo $arr->column_2; ?></td>
<td><?php echo $arr->column_3; ?></td>
<td><?php echo $arr->column_4; ?></td>
<td><?php echo $arr->column_5; ?></td>
<td><?php echo $arr->column_6; ?></td>
<td style="text-align:right;"><?php echo $arr->column_7; ?></td>
<td style="text-align:right;"><?php echo $arr->column_8; ?></td>
<td><?php echo $arr->column_9; ?></td>
<td><?php echo $arr->column_10; ?></td>
</tr>
<?php } ?>
</tbody>
JAVASCRIPT
<script>
$(document).ready(function() {
// including input
$('#big_table tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// datatable initialization plus exporting to excel
var table = $('#big_table').DataTable( {
dom: 'Bfrtip',
buttons: [
'excelHtml5'
],
"bFilter": false,
"bInfo": false,
} );
//search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
</script>
数据表初始化部分中的bFilter
属性似乎使数据表的冲突变得不可搜索。根据datatables网站,如果您想单独搜索多个列,则应将此属性设置为true。尝试以下代码进行数据表初始化,
var table = $('#big_table').DataTable( {
dom: 'Bfrtip',
buttons: [
'excelHtml5'
],
"bInfo": false,
} );
这现在应该对你有用了。检查此JSFIDDLE
如果要禁用(隐藏)数据表全局搜索筛选器,则应该将dom设置为lrtp
。例如:dom: 'lrtp'
相关文章:
- jQuery Datatables:单个列搜索不起作用
- 搜索按钮谷歌地图在我的vf页面上不起作用
- Angular UI Select2指令搜索功能不起作用
- jQuery .focus() 在 Safari(桌面)的搜索字段中不起作用
- 在js中的表中搜索不起作用
- AngularJS搜索没有'不起作用
- 在引导选择组件中的搜索不起作用,其中数据令牌包含所有数字;4730”;
- JQuery UI 地图搜索不起作用
- 谷歌地图地点搜索框不起作用
- 搜索按钮不起作用
- jQuery搜索和替换不起作用(Wordpress)
- 不区分大小写的字符串搜索不起作用
- 引导表分页和搜索不起作用
- ajax实时建议搜索不起作用
- jQuery mobile折叠列表视图,搜索不起作用
- Angular在ng-repeat中的搜索不起作用
- 实时搜索不起作用
- 选择2 4.0 JSON搜索不起作用
- JS,在数组中搜索不起作用
- 为什么我的即时搜索不起作用