Example 1
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $(this).text();
if(title == 'Status'){
$(this).html( '<input type="text" size="5px" placeholder="'+title+'" />' );
}
});
// DataTable
var table = $('#example').DataTable({
initComplete: function () {
// Apply the search
this.api().columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
}
});
} );
Example 2
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $(this).text();
if(title == 'Status'){
$(this).html( '<input type="text" size="5px" placeholder="'+title+'" />' );
}
});
// DataTable
var table = $('#example').DataTable({
initComplete: function () {
// Apply the search
this.api().columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
},
"columnDefs": [
{ "orderable": false, "targets": [1] },
{ 'searchable' : false, 'targets' : [7]
},
],
"order": [[ 6, "desc" ]]
});
} );