Agence web et solutions IT, Experts Symfony contact@avanim-prod.com

Bouton de recherche sur les datatables jQuery

1 août 2016 Grégoire Pourteau AJAX & jQuery Étiquettes : , 0 Comments

Plug-in jQuery datatables

Le plug-in jQuery datatables est devenu incontournable pour gérer des tableaux en toute simplicité.
Evidemment, quand il s’agit de plusieurs milliers de données, il est nécessaire de l’utiliser en mode “server side”.
Il permet entre autres, de gérer la pagination, le tri, et différents types de filtres sur chaque colonne.

Par contre, sur ce dernier point, les requêtes sont lancées à intervalle régulier (défini par l’option searchDelay) lorsque l’on saisit des caractères dans un champ de recherche.
Quand l’utilisateur veut appliquer plusieurs filtres, c’est inutile d’envoyer plusieurs requêtes avant qu’il ait terminé sa saisie.
Nous allons voir comment brancher un bouton de recherche, et attendre qu’on l’utilise ou qu’on appuie sur la touche entrée pour déclencher la recherche.

Code datatables Jquery

D’abord on définit une fonction à passer dans l’option initComplete du datatable :

function (settings) {
var datatable = settings.oInstance;
var datatableObject = datatable.DataTable();

// Ensuite on définit une fonction à appeler à chaque saisie dans un champs de filtre :

var throttledSearch = $.fn.DataTable.util.throttle(
function (event) {

// On garde en mémoire la colonne et la valeur à filtrer :

datatableObject
.column($(event.currentTarget).data(‘filter-property-id’))
.search(this.value);

// S’il s’agit de la touche entrée, on lance la requête :

if (event.keyCode == 13) {
datatableObject.draw();
}
},
0
);

// On associe cette fonction à chaque évènement de saisie dans un champs de filtre :

datatable.find(‘tr input.individual_filtering, tr select.individual_filtering’).on(« focusout keyup change », throttledSearch);

// On lance la requête lorsqu’on clique sur le bouton :

$(‘#search-btn’).click(function (e) {
e.preventDefault();

datatableObject.draw();
});
}

// Si comme moi, vous utilisez le bundle sg datatable sur Symfony, il faut juste appeler la fonction unbind() avant on() pour surcharger son code.

// Ensuite on peut définir le bouton html dans une balise hidden et le cloner dans le tableau :

$(‘#search-btn’).clone().appendTo(datatable.find(‘thead tr:last td:last’));

// Pensez à rafraîchir le tableau, le déplacement du bouton a pu causer des décalages :

datatableObject.columns.adjust();

Submit a comment