jQuery Datatables:单个列搜索不工作。

I have included the code that is present in this link: https://datatables.net/examples/api/multi_filter.html

我已经包含了这个链接中的代码:https://datatables.net/examples/api/multi_filter.html

But it isn't working properly. The search boxes show up but on typing the details in the search boxes the data does not load. I will post the code that I have included in my file. Kindly have a look at it and verify the same.

但它并没有正常工作。搜索框会显示出来，但在没有加载数据的搜索框中键入细节时就会显示出来。我将发布我的文件中包含的代码。请您过目一下，核对一下。

Any help will be greatly appreciated. Thank You.

如有任何帮助，我们将不胜感激。谢谢你！

CODE

代码

        <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

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>

1 个解决方案

#1

Seems like bFilter attribute in your datatable init part is making the conflict for datatable to be non-searchable. According to the datatables site this attribute should be set to true if you want to search multiple columns individually. Try the below code for datatable initialization,

似乎您的datatable init部分中的bFilter属性使datatable的冲突不可搜索。根据datatables站点，如果您想单独搜索多个列，则应该将该属性设置为true。尝试下面的代码进行datatable初始化，

var table = $('#big_table').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'excelHtml5'
    ],
    "bInfo": false,
} );

This should work for you now. Check this JSFIDDLE

这应该对你有用。检查这个JSFIDDLE

If you want to make the datatable global search filter to be disabled(hidden) then the dom should be set to lrtp. Eg: dom: 'lrtp'

如果希望禁用(隐藏)datatable全局搜索过滤器，则应将dom设置为lrtp。如:dom:“lrtp”

#1

var table = $('#big_table').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'excelHtml5'
    ],
    "bInfo": false,
} );