Datatables – Vider le champ de recherche

Me revoilà pour un petit truc sur les datatables. Cette fois-ci, je vous montre ce que j’ai fait pour avoir une petite croix dans le champ de recherche. Cette croix permet de vider le contenu du champ. Étrange que ça ne soit pas en standard… Je rappelle quand même que mon code utilise la version 1.12 de datatables.

En fait, histoire d’avoir ce comportement par défaut, j’ai intégré mon code dans la fonction « $.extend(true, $.fn.dataTable.defaults » que nous avions vue la dernière fois.

$.extend(true, $.fn.dataTable.defaults, {

    "fnInitComplete": function(oSettings) {

            // On récupère le label
            let divFilterSelector = '#' + oSettings.sTableId + '_filter';
            let labelFilter = $(divFilterSelector + ' label');

            // Ci-dessous le html qui est ajouté pour créer le bouton
            let html = "<a id='clear-search' href='#'><span class='btn p-0'>&times;
            </span></a>";
            labelFilter.addClass("position-relative");
            labelFilter.append(html);

            // Une petite classe bootstrap sur le input de recherche
            labelFilter.find("input[type='search']").addClass("pr-3");

            // Et quelques classes sur le lien/bouton
            let btnClear = $("#clear-search");
            btnClear.addClass("d-inline-block position-absolute top-0 end-0 mr-1");

            // On ajoute le comportement au click : on vide (dt.search(''), et on rafraichit les données et l'affichage
            btnClear.on('click', function () {
                let dt = $('#' + oSettings.sTableId).DataTable();
                dt.search( '' )
                    .columns().search( '' )
                    .draw();
            });

        };
});

Voilà voilà. Comme indiqué la fois dernière, je publie par petits articles, sinon j’ai la flemme de me mettre à la rédaction, et ça traîne pendant des mois…

@+ !

Michaël

Tags: champ recherchedatatablesdéveloppementjavascriptjsvider