Individual Column Search on Top in Datatable | Bootstrap Datatable | JQuery

This video tutorial explains about how you can add individual search column on top of datatable In this video we will discuss how to implement search functionality on every jQuery datatable column. Two ways: using css property (display : table-header-group) clone thead in js $(document).ready(function() { Setup - add a text input to each footer cell $('#example thead tr').clone(true).appendTo( '#example thead' ); $('#example thead tr:eq(1) th').each( function (i) { var title = $(this).text(); $(this).html( 'input type="text" placeholder="Search '+title+'" ' ); $( 'input', this ).on( 'keyup change', function () { if ( table.column(i).search() !== this.value ) { table .column(i) .search( this.value ) .draw(); } } ); } ); var table = $('#example').DataTable( { orderCellsTop: true, fixedHeader: true } ); } ); Individual Search Column on Top in Datatable | Bootstrap Datatable jQuery datatables individual column search Datatables Individual column searching using Jquery individual column searching (select inputs) Individual Column Search on Top in Datatable #knowledgethrusters