Prevent sorting on clicking Input Field in Data Table not working - datatable

Question

I am using DataTable to display my Data.
Issue
Each Column has a Search Field in the Head. But when I click on the input field, it keeps sorting every time I click inside the input field.
This is what I need
On Clicking, I don't want the sorting through input box.
What I have tried isn't working
<script type="text/javascript">
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example thead th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
var table = $('#example').DataTable({
"pageLength": 20,
initComplete: function () {
this.api().columns().every( function () {
var that = this;
$( 'input', this.header() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that.search( this.value ).draw();
}
});
} );
}
});
} );
</script>
Please help.

Answer 1

To do this you can use 2 rows in the header:
the first one to control ordering/sorting
another one to display each input field
Then you need to use the orderCellsTop option to specify that only the first row should be used to control sorting.
A basic example, would therefore be as follows:
$(document).ready(function() {
$("#result-table thead tr").clone(true).appendTo("#result-table thead");
// add a text input filter to each column of the new row
$("#result-table thead tr:eq(1) th").each(function (i) {
var title = $(this).text();
$(this).html("<input type='text' class='form-control' placeholder='Search '" + title + "' />");
$("input", this).on( "keyup change", function () {
if ($("#result-table").DataTable().column(i).search() !== this.value) {
$("#result-table").DataTable().column(i).search(this.value).draw();
}
});
});
$('#example').DataTable({
orderCellsTop: true,
});
} );