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>