Idividual column search not working

Idividual column search not working

FilipLFilipL 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

Answers

  • colincolin Posts: 5,407Questions: 0Answers: 940

    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

  • FilipLFilipL Posts: 3Questions: 1Answers: 0

    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? :smile:

  • kthorngrenkthorngren Posts: 5,904Questions: 19Answers: 1,306
    Answer ✓

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

    Kevin

  • colincolin Posts: 5,407Questions: 0Answers: 940

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

  • FilipLFilipL Posts: 3Questions: 1Answers: 0

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

    It's working now, cheers!

Sign In or Register to comment.