Idividual column search not working

FilipL

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>")
                });
            });
        }
    });
});

colin

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

FilipL

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?

kthorngren

The problem is you have searching disabled with this line "searching": false,.

Kevin

colin

Ha, Kevin wins the observation prize on this one...

FilipL

Thank you lads, that was too obvious to not see...

It's working now, cheers!