Reputation:
We put Searchbox in second thead for searchbox not working in all columns
First thead for sorting & second thead for searchbox
Sorting is working but searchbox not working
We write Any value in searchbox but no searching record
Our HTML Code
<thead>
<tr>
<td><b>Customer Name</b></td>
<td><b>Contact Number</b></td>
<td><b>Contact Person Name</b></td>
<td><b>Contact Person Contact Number</b></td>
<td><b>City</b></td>
<td><b>Country</b></td>
<?php if($_SESSION['user_type'] == 'admin' || $_SESSION['user_type'] == 'super_admin' || $_SESSION['user_type'] == 'Director') { ?><td><b>Sales user name</b></td><?php } ?>
<td><b>Schedule</b></td>
<?php if($_SESSION['user_type'] == 'admin' || $_SESSION['user_type'] == 'super_admin') { ?><td><b>Created User</b></td><?php } ?>
<td><b>Action</b></td>
<?php if($_SESSION['user_type'] != 'Director' ){ ?>
<td><b>Add</b></td>
<?php } ?>
</tr>
</thead>
<thead>
<tr>
<th>Customer Name</th>
<th>Contact Number</th>
<th>Contact Person Name</th>
<th>Contact Person Contact Number</th>
<th>City</th>
<th>Country</th>
<?php if($_SESSION['user_type'] == 'admin' || $_SESSION['user_type'] == 'super_admin' || $_SESSION['user_type'] == 'Director') { ?><th>Sales user name</th><?php } ?>
<th>Schedule</th>
<?php if($_SESSION['user_type'] == 'admin' || $_SESSION['user_type'] == 'super_admin') { ?><th>Created User</th><?php } ?>
<th>Action</th>
<?php if($_SESSION['user_type'] != 'Director' ){ ?>
<th>Add</th>
<?php } ?>
</tr>
</thead>
Our Jquery Code
$('#example1 thead th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example1').DataTable();
// Apply the search
table.columns().every( function () {
var that = this;
//alert(1);
$( 'input', this.header() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
Upvotes: 0
Views: 1745
Reputation: 85528
Copy pasting code from examples rarely works in different scenarios or when the prerequisites is changed. If you want the above code to work, you must at least target the second <thead>
, when you are inserting the <input>
's :
$('#example1 thead:eq(1) th').each(function() {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
});
Notice the thead:eq(1)
selector, the hack you are using above by using <td>
's instead of <th>
's is really bad. Dont try to fool out the logic! Then your "apply the search" is dead wrong, if the purpose is to implement column-based search. The code you are using searches consecutively in all the columns each and every time, it is not column-based. A column-based search implemented on the injected <inputs>
would look like this :
$('input', '#example1 thead:eq(1)').each(function(index, input) {
$(input).on('keyup change', function() {
table.column(index).search( this.value ).draw();
})
})
This give you multi column-based search, where you can refine the search in each of the <input>
's.
working demo -> http://jsfiddle.net/xbdr7qfj/
Upvotes: 2