Filter with multiple checkbox

fbl

Hello,

I would like to filter the data of my table (server-side), thanks to several checkboxes on a single column.
Currently, it works when only one checkbox is checked. When multiple checkboxes are checked, I have no more data

In my html file :

<input type="checkbox" name="statut" value='Clos'> Clos
<input type="checkbox" name="statut" value="Annulé"> Annulé

In my JS file :
$('input:checkbox').on('change', function () {

    var stats = $('input:checkbox[name="statut"]:checked').map(function() {
        return this.value;
    }).get().join('|');

    $('.data-table').DataTable().column(5).search(stats, true, false, false).draw(false);

});

To summarize, it works:

$('.data-table').DataTable().column(5).search("Clos", true, false, false).draw(false);

It does not work :

$('.data-table').DataTable().column(5).search("Clos|Annulé", true, false, false).draw(false);

https://debug.datatables.net/uzodes

sandy

Hi fbl,

I have tried to replicate the problem here. Seems to work fine for me. If this doesn't fix it for you, feel free to edit it to show your particular issue.

Hope this helps,

Sandy

fbl

Thank you for your answer, I do not understand why at home it does not work. I do not know how I could show you my code because it's a symfony project and I use several pages

fbl

Sorry for double post.
I feel that regex does not work

Maybe my js file can help you?

const Table = {
    init: function () {
        $('.data-table').each(function () {
            let table = Table.initTable(this, $(this).data('type'));
            let parent = $(this).closest('.box-body');
            $(parent).find('.dataTables_wrapper').on('keyup', ".column_search", function () {
                table.column($(this).parent().index()).search(this.value).draw();
            });

        });

    },

    initTable: function (dataTable, type) {
        $(dataTable).find('tfoot th').each(function () {
            let title = $(this).text();
            let disabled = $(this).hasClass('disabled') ? 'disabled' : '';

                $(this).html('<input type="text" class="form-control column_search" style="width: 100%" ' +
                    'placeholder="' + title + '" ' + disabled + ' />');

        });

        return $(dataTable).DataTable({
            "responsive": true,
            "order": [[0, "desc"]],
            "scrollX": true,
            "processing": true,
            "serverSide": true,
            "searchDelay": 350,
            "bDeferRender": true,
            //"searchCols": [null, null, null, null, null, { sSearch: "Ouvert", "regex": true }, null, null, null],
            "ajax": {
                url: Routing.generate('ticketing_ajax_datatable', {type: type}, false),
                type: "POST",
            },
            'language': {
                "sProcessing": "Traitement en cours...",
                "sSearch": "Rechercher selon n'importe quel critère&nbsp;:",
                "sLengthMenu": "Afficher _MENU_ &eacute;l&eacute;ments",
                "sInfo": "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                "sInfoEmpty": "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
                "sInfoFiltered": "",
                "sInfoPostFix": "",
                "sLoadingRecords": "Chargement en cours...",
                "sZeroRecords": "Aucun &eacute;l&eacute;ment &agrave; afficher",
                "sEmptyTable": "Aucune donn&eacute;e disponible dans le tableau",
                "oPaginate": {
                    "sFirst": "Premier",
                    "sPrevious": "Pr&eacute;c&eacute;dent",
                    "sNext": "Suivant",
                    "sLast": "Dernier"
                },
                "oAria": {
                    "sSortAscending": ": activer pour trier la colonne par ordre croissant",
                    "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissant"
                }
            },
            "sPaginationType": "full_numbers",
            "aoColumns": [null, null, null, null, null, null, null, null, null],
            "columnDefs": [
                {
                    targets: 0,
                    name: 'id',
                    className: "",
                    render: function (data, type, row) {
                        return "<a href='" + Routing.generate('ticketing_detail', {id: data}) + "'>#" + data + "</a>";
                    }
                },
                {
                    targets: 1,
                    name: 'author',
                    className: "",
                    render: function (data, type, row) {
                        return data;
                    }
                },
                {
                    targets: 2,
                    name: 'client',
                    className: "",
                    render: function (data, type, row) {
                        return data;
                    }
                },
                {
                    targets: 3,
                    name: 'createdAt',
                    className: "",
                    render: function (data, type, row) {
                        return data;
                    }
                },
                {
                    targets: 4,
                    name: 'category',
                    className: "",
                    render: function (data, type, row) {
                        return data;
                    }
                },
                {
                    targets: 5,
                    name: 'status',
                    className: "",
                    render: function (data, type, row) {
                        data = data.split(' - ');
                        const color = data[1];

                        return "<div class='label bg-" + color + "'>" + data[0] + "</div>";
                    }
                },
                {
                    targets: 6,
                    name: 'type',
                    className: "",
                    render: function (data, type, row) {
                        return data;
                    }
                },
                {
                    targets: 7,
                    name: 'assignated',
                    className: "",
                    render: function (data, type, row) {
                        return data;
                    }
                },
                {
                    targets: 8,
                    name: 'priority',
                    className: "",
                    render: function (data, type, row) {
                        if(data === 'Urgent'){
                            return "<div class='label bg-danger'>" + data + "</div>";
                        }
                        else{
                            return data;
                        }
                    }
                },
            ],
        });
    },
};

$(document).ready(function () {

    $(':checkbox:checked').prop('checked',false);

    $('[data-toggle="tooltip"]').tooltip();

    $(".select2-tags").select2({
        tags: true,
        language: 'fr'
    });

    $(".datepicker").datepicker({
        format: "dd/mm/yyyy",
        todayBtn: "linked",
        language: "fr",
        clearBtn: true,
        autoclose: true,
        todayHighlight: true
    });


    $('[data-provider="select2"]').select2({
        language: 'fr'
    });

    Table.init();

    if (document.getElementById("cat")) {
        Detail.init();
    }

    if (document.getElementById("rating-input")) {
        Rating.init();
    }

});

$('input:checkbox').on('change', function () {

    var stats = $('input:checkbox[name="statut"]:checked').map(function() {
        return this.value;
    }).get().join('|');

    $('.data-table').DataTable().column(1).search(stats, true, false, false).draw(false);
});

kthorngren

Since you are using server side processing your server script will need to support the regex search. Take a look at this thread and the threads it links to for more information.

Kevin