Idividual column search not working
Idividual column search not working
FilipL
Posts: 3Questions: 1Answers: 0
Hello,
Im totally lost, can anyone see what's wrong here?
I've followed the steps from https://datatables.net/examples/api/multi_filter_select.html
The values are displayed correctly in the dropdown but it doesen't search when i select a value.
No errors in the console.
$(document).ready(function() {
var table = $("#taskList").DataTable( {
"serverSide": false,
"ajax": {
"url": "run.php?taskList",
"dataSrc": ""
},
"responsive": true,
"searching": false,
"ordering": true,
"order": [ 1, "asc" ],
"paging": true,
"pageLength": 25,
"filter": true,
"processing": true,
"colReorder": true,
"columns": [
{ "data": "title" },
{ "data": "description", "className": "none" },
{ "data": "deadline" },
{ "data": "prio" },
{ "data": "status" },
{ "data": null }
],
"columnDefs": [
{
"targets": 0,
"responsivePriority": 1
},
{
"targets": 2,
"responsivePriority": 3,
"render": $.fn.dataTable.render.moment("YYYY-MM-DD HH:mm:ss", "YYYY-MM-DD HH:mm", "sv"),
"width": "100px"
},
{
"targets": 3,
"responsivePriority": 2,
"width": "55px"
},
{
"targets": 4,
"responsivePriority": 3,
"width": "45px"
},
{
"targets": 5,
"render": function(data) {
if (data.status == 1) {
return "<a href='run.php?id=" + data.id + "&status=2'><button class='btn btn-primary btn-sm'><i class='fa fa-check'></i></button></a>";
} else if (data.status == 2) {
return "<a href='run.php?id=" + data.id + "&status=1'><button class='btn btn-secondary btn-sm'><i class='fa fa-undo'></i></button></a>";
}
}
}
],
"dom": "lftipr",
initComplete: function() {
table.columns().every(function() {
var column = table.column(this);
var select = $("<select><option value=''></option></select>")
.appendTo($(column.footer()).empty())
.on("change", function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? "^" + val + "$" : "", true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append("<option value='" + d + "'>" + d + "</option>")
});
});
}
});
});
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Hi @FilipL ,
It's because you're using ColReorder. This example here shows how to do input element filtering, the same principle will apply for the selects.
Cheers,
Colin
Hello Colin,
Thank you for you answer. Didn't realize I had ColReorder in my code. I have removed it now since the users don't use it, I still have the same problem however.
More ideas?
The problem is you have searching disabled with this line
"searching": false,.Kevin
Ha, Kevin wins the observation prize on this one...
Thank you lads, that was too obvious to not see...
It's working now, cheers!