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

Опубликовано: 13 Октябрь 2024
на канале: 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