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

Published: 29 November 2020
on channel: Knowledge Thrusters

18,554

177

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

Watch video Individual Column Search on Top in Datatable | Bootstrap Datatable | JQuery online without registration, duration hours minute second in high quality. This video was added by user Knowledge Thrusters 29 November 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 18,554 once and liked it 177 people.

8,486