Why is my table not responsive when I add a tfoot?
I tried using the example found at https://datatables.net/examples/api/multi_filter.html
Interestingly, when the footer contains only text, the table is responsive. However, if there's an input field in the footer, the table becomes unresponsive.
HTML:
<div class="row">
<div class="col-sm-12">
<h2>Persons</h2>
</div>
<div class="col-sm-12">
<table id="tblPersons" class="table display table-hover table-striped userTables" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Telephone</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Telephone</th>
</tr>
</tfoot>
<tbody>
JS:
$('#tblPersons thead th').each( function () {
var title = $('#tblPersons tfoot th').eq($(this).index()).text();
$(this).html('<input type="text" class="form-control" placeholder="Search '+title+'" />');
});
var table=$("#tblPersons").DataTable({
bSort:true,
bPaginate:true,
bFilter:true,
bInfo:false,
//"bLengthChange": false,
responsive:true
});
table.columns().eq(0).each( function ( colIdx ) {
$( 'input', table.column( colIdx ).header() ).on( 'keyup change', function () {
table.column( colIdx ).search( this.value ).draw();
});
$('input', table.column(colIdx).header()).on('click', function(e) {
e.stopPropagation();
});
});