jQuery Datatables: colonne Individuelle de la recherche ne fonctionne pas

J'ai inclus le code qui est présent dans ce lien: https://datatables.net/examples/api/multi_filter.html

Mais il ne fonctionne pas correctement. La recherche de boîtes de montre mais sur le typage des détails dans les zones de recherche les données ne prend pas en charge. Je vais poster le code que j'ai inclus dans mon fichier. Veuillez y jeter un oeil et de vérifier la même.

Toute aide sera grandement appréciée. Merci.

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>   

OriginalL'auteur DEV | 2016-05-10