randommman randommman - 4 months ago 7
jQuery Question

Adding individual column search on seprate row

I want to add text boxes to search my datatables (which i have done) but the position of them is in the same

as my row titles.

As you can see here:

enter image description here

But I want to make the inputs go on the seperate row so they're split like so:

enter image description here

My code:

if (!$.fn.DataTable.isDataTable('.table')) {
$('.table thead th').each( function (i) {
var title = $('.table thead th').eq( $(this).index() ).text();
$(this).after('<input type="text" placeholder="Search '+title+'" data-index="'+i+'" />' );
} );

var table = $('.table').DataTable( {
paging: false
} );

$( table.table().container() ).on( 'keyup', 'thead input', function () {
.column( $(this).data('index') )
.search( this.value )
} );

How can I achieve this?


You need to create another row.

var ths = $('.table thead th');
var searchTr = $('<tr></tr>');
searchTr.append(ths.map(function (i) {
  var title = $(this).text();
  return $('<td><input type="text" placeholder="Search '+title+'" data-index="'+i+'" /></td>')[0];
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">