I seem not able to hide DataTables default search bar. So far, I have tried solution from this thread, but setting bFilter:false
disables filtering entirely, so my search boxes in the footer simply do not work any longer.
I have put up jsfiddle
My HTML:
<thead>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</thead>
<tbody>
<table id="mytable">
<thead>
<tr>
<th>name</th>
<th>type</th>
<th>color</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>apple</td>
<td>fruit</td>
<td>red</td>
</tr>
<tr>
<td>banana</td>
<td>fruit</td>
<td>yellow</td>
</tr>
<tr>
<td>carrot</td>
<td>vegie</td>
<td>red</td>
</tr>
<tr>
<td>potato</td>
<td>vegie</td>
<td>brown</td>
</tr>
</tbody>
</table>
</tbody>
and jQuery code:
$(document).ready(function(){
let table = $('#mytable').DataTable();
$('#mytable tfoot th').each( function (i) {
let title = $('#mytable thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" data-index="'+i+'" />' );
} );
$( table.table().container() ).on( 'keyup', 'tfoot input', function () {
table
.column( $(this).data('index') )
.search( this.value )
.draw();
} );
});
Any help is much appreciated.
You need to adjust sDom attribute of your DataTable accordingly: let table = $('#mytable').DataTable({sDom: 'lrtip'});
That's supposed to hide search box without disabling filtering feature. Also, you might want to check out official reference doc regarding the subject.
l - length changing input control
**f - filtering input**
t - The table
i - Table information summary
p - pagination control
r - processing display element
**f is for filter , so we can remove it.**
$('#example').dataTable( {
"dom": 'lrtip'
} );
let table = $('#mytable').DataTable({sDom: 'lrtip'});
this worked for me
Simply add this class in your css - .dataTables_filter, .dataTables_info { display: none; }
.dataTables_filter, .dataTables_info { display: none; }
The live instance -
$(document).ready(function () { let table = $('#mytable').DataTable(); $('#mytable tfoot th').each(function (i) { let title = $('#mytable thead th').eq($(this).index()).text(); $(this).html('<input type="text" placeholder="Search ' + title + '" data-index="' + i + '" />'); }); $(table.table().container()).on('keyup', 'tfoot input', function () { table.column($(this).data('index')).search(this.value).draw(); }); });
.dataTables_filter, .dataTables_info { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css"> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script> <tbody> <table id="mytable"> <thead> <tr> <th>name</th> <th>type</th> <th>color</th> </tr> </thead> <tfoot> <tr> <th></th> <th></th> <th></th> </tr> </tfoot> <tbody> <tr> <td>apple</td> <td>fruit</td> <td>red</td> </tr> <tr> <td>banana</td> <td>fruit</td> <td>yellow</td> </tr> <tr> <td>carrot</td> <td>vegie</td> <td>red</td> </tr> <tr> <td>potato</td> <td>vegie</td> <td>brown</td> </tr> </tbody> </table> </tbody>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.