jQuery Datatables: Individual column searching not working

Question

I have included the code that is present in this link: 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

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

Answer 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,

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

This should work for you now. Check this 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'