dataTable.columns(0).search('search-term').draw() does not populate columns[0][search][value]
dataTable.columns(0).search('search-term').draw() does not populate columns[0][search][value]
athar258
Posts: 5Questions: 1Answers: 0
Hi. I have been banging my head since 2 days on an issue which appears to be very simple and has plenty of help available but I can't get it to work. I m trying to do a server side search on each column of the grid and when I call dataTable.columns(0).search('search-term').draw() the POST request it generates always has the columns[0][search][value] empty.
Below are the two approaches I tried over and over trying different things and neither of these work for me, clearly there is something I am missing.
I also attached a snapshot for clarity, also, below is the full configuration of my DataTable, can anybody please point me what am I doing wrong.
Approach #1
initComplete: function () {
$('.scheduling-search')
.on('keyup change', function () {
var i = $(this).attr('data-column');
var v = $(this).val();
schedulingGrid.columns(i).search(v).draw();
}
);
}
Approach #2
schedulingGrid.columns().every( function () {
var column = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
column
.search( this.value )
.draw();
} );
});
Here is the full configuration of my DataTable
var schedulingGrid = $('#scheduling-manager-grid').DataTable({
processing: true,
searchDelay: 1000,
pageLength: {$pageSize},
paginate: true,
lengthChange: false,
filter: false,
info: true,
autoWidth: false,
serverSide: true,
order: [[3, '{$defaultSortOrder}']],
language: {
paginate: {
next: '',
previous: ''
}
},
ajax: {
type: 'post',
url: '{$url}',
},
columns: [
{
width: '40px',
data: 'briefingId',
name: 'id',
searchable: true,
orderable: true
},
{
width: '100px',
data: 'briefingTitle',
name: 't.title',
searchable: true,
orderable: true
},
{
width: '100px',
data: 'dateSubmitted',
name: 't.created_at',
searchable: true,
orderable: true
},
{
width: '100px',
data: 'preferredDate',
name: 't.preferred_date',
searchable: true,
orderable: true
},
{
width: '100px',
data: 'requesterName',
name: 't.requestor_name',
searchable: true,
orderable: true
},
{
width: '100px',
data: 'briefingStatus',
name: 't.briefing_status_id',
searchable: true,
orderable: true
},
{
width: '100px',
data: 'briefingType',
name: 't.briefing_type_id',
searchable: true,
orderable: true
},
{
data: 'notes',
name: 'notes',
searchable: true,
orderable: false
}
],
initComplete: function () {
$('.scheduling-search')
.on('keyup change', function () {
var i = $(this).attr('data-column');
var v = $(this).val();
schedulingGrid.columns(i).search(v).draw();
}
);
}
});
And the HTML goes like
<table id="scheduling-manager-grid">
<thead>
<tr>
<th>Briefing ID</th>
<th>Briefing Title</th>
<th>Date Submitted</th>
<th>Preferred Briefing Date</th>
<th>Requestor Name</th>
<th>Briefing Status</th>
<th>Briefing Type</th>
<th>Notes</th>
</tr>
</thead>
<thead>
<tr>
<td><input style="width: 50px;" type="text" data-column="0" class="scheduling-search"></td>
<td><input style="width: 80px;" type="text" data-column="1" class="scheduling-search"></td>
<td><input style="width: 80px;" type="text" data-column="2" class="scheduling-search"></td>
<td><input style="width: 80px;" type="text" data-column="3" class="scheduling-search"></td>
<td><input style="width: 80px;" type="text" data-column="4" class="scheduling-search"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</thead>
</table>
This question has accepted answers - jump to:
Answers
There are the answers I have been following along with many other...
https://coderexample.com/datatable-custom-column-search/
https://datatables.net/forums/discussion/22431/per-column-searching-not-working
https://datatables.net/forums/discussion/31978/why-is-the-column-search-not-working-after-i-implemented-german-json-file
Remove that. It is disabling filtering. It is an alias for
searchingfor legacy reasons.Allan
OMG. I can't believe it was that simple... Thanks allan for solving this, you saved me a lot of frustration.
I'm sure you get it a lot but you have a great plugin..
Just wondering, is this documented anywhere? I think I read lots of documentation and if its there, I clearly missed it. Thanks.
Not directly. The reason that
filterisn't documented anywhere (I'm not sure where you got it from) is that it comes about from the support for the old Hungarian notation. Rather than having a static list of how all the Hungarian and camelCase options and how they map, DataTables does it programmatically. So the legacy bFilter option can be mapped to justfilter.But for naming consistency DataTables 1.10+ uses the term
searchfor the built in search options (hencesearching).So doing
filter: falsewas the same assearching: false- which means DataTables ignores search terms.Regards,
Allan
edit No idea how I'd document that :-). But then, you were using an undocumented option!
Got it. When I started using datatables last week, I read somewhere that bFilter. can be used to get rid of the global search. Then for some really weird reason I changed it to 'filter'.
Its all good now. Thanks again for the explanation.
It doesn't just get rid of the global search input, but disables filtering completely (to be honest, you aren't the first to stumble over that aspect - sorry). Use the horrible
domoption to remove the global search input (or CSS) while leaving the search enabled.Allan