jQuery Girl
  1. jQuery Girl
  3. jQuery DataTables ‘OR’ Rechercher / Filtrer
Intereting Posts
FineUploader: puis-je utiliser addFiles () à partir du wrapper JQuery? Bootstrap Typeahead avec source AJAX: ne pas retourner le tableau comme prévu Jquery comment lier un événement clic à des éléments créés dynamicment? FullCalendar – Quel niveau de performances de rendu des événements dois-je espérer Changer la taille de la police avec jQuery jquery datepicker date saisie manuelle Bouton suivant et précédent non visibles dans fancybox jQuery Comment obtenir un travail de saisie semi-automatique de l’interface utilisateur JQuery avec l’ID d’élément Erreur Twitter Bootstrap Popover Jquery: Empêcher le rechargement de la page lorsque vous appuyez sur le type d’entrée = submit comment utiliser jquery avec la syntaxe de razor dans asp.net mvc 5? Effet shiny automatiquement avec css Comment créer un iscroll infini? délai pour les promesses Comment empêcher les événements de clic sur le corps du document (peut-être un bogue dans Cordova?)

jQuery DataTables ‘OR’ Rechercher / Filtrer

J’utilise jQuery DataTables ( http://www.datatables.net/ ) pour afficher des données tabulaires. La recherche / filtre est une fonctionnalité puissante. Cependant, si plusieurs mots-clés sont recherchés dans la table, la recherche ne filtre que les données déjà filtrées.

Par exemple, dans l’exemple ici – http://jsfiddle.net/illuminatus/2j0Lz5or/1/

Si les mots clés sont recherchés comme 10 99 aucun résultat ne sera obtenu. Je veux que la recherche affiche tous les résultats / lignes contenant tous les mots-clés recherchés ou entrés.

Une recherche dans 10 99 afficherait les lignes 1, 5 et 6.

Techniquement, la recherche devrait être une recherche “OU”.

J’apprécierais toute aide.

EDIT: La recherche doit être une recherche “OU”.

AND -filter (inclure les lignes où tous les mots de recherche sont présents). Ce filtre personnalisé remplace le processus de filtrage intégré. Chaque colonne de chaque ligne est comparée à chaque mot recherché. 

 $.fn.dataTableExt.afnFiltering.push( function(oSettings, aData, iDataIndex) { var keywords = $(".dataTables_filter input").val().split(' '); var matches = 0; for (var k=0; k-1) { matches++; break; } } } return matches == keywords.length; } );

violon fourré -> http://jsfiddle.net/9d097s4a/

OU -filter (inclure les lignes où au moins un des mots recherchés est présent). C’est une autre approche, principalement une tentative de rationaliser cette réponse ci-dessus. Au lieu de jouer avec les termes de recherche oSearch et oSearch dur, l’événement de filtrage par défaut est remplacé par un événement qui segmente la phrase de recherche, puis exécute un fnFilter() avancé. En tant qu’expérience facultative, la recherche est maintenant effectuée uniquement lorsque l’utilisateur appuie sur Entrée – cela semble plus naturel. 

 var input = $(".dataTables_filter input"); input.unbind('keyup search input').bind('keypress', function (e) { if (e.which == 13) { var keywords = input.val().split(' '), filter =''; for (var i=0; i

voir la démo -> http://jsfiddle.net/2p8sa9ww/

J’ai eu ce travail en utilisant la recherche regEx. J’ai utilisé le regEx suivant pour rechercher dans le tableau des mots-clés 10 99

^(?=.*?(10|99)).*?

Violon fourré – http://jsfiddle.net/illuminatus/2j0Lz5or/6/

Réf.: http://datatables.net/forums/discussion/12062/filtering-jquery-datatable-using-regular-expression

Mis à jour pour Datatables 1.10

// Champ de recherche dans le nouvel emplacement 

 Table = $('#your_datatable').DataTable(); $('#your_input_text_field').keyup(function () { Table.search($(this).val()).draw(); }) ////OR search (enabling regular expression search) var input = $('#your_input_text_field'); input.unbind('keyup search input').bind('keypress', function (e) { if (e.which == 13) { var keywords = input.val().split(' '), filter = ''; for (var i = 0; i < keywords.length; i++) { filter = (filter !== '') ? filter + '|' + keywords[i] : keywords[i]; } //true (param 2) turns regex on, false (param 3) turns smart search off Table.search(filter, true, false).draw(); } });

La même chose mais en déclenchant la recherche sur “chaque” touche appuyée au lieu d’appuyer sur entrée: 

 var dataTable = $('table').dataTable(); var input = $(".dataTables_filter input"); input.unbind('keyup search input').bind('keyup', function(e) { if (input.val().length > 0) { var keywords = input.val().sortingm().split(' '), filter = ''; for (var i = 0; i < keywords.length; i++) { filter = (filter !== '') ? filter + '|' + keywords[i] : keywords[i]; } dataTable.fnFilter(filter, null, true, false, true, true); // ^ Treat as regular expression or not } else if (input.val().length == 0) { dataTable.fnFilter(" ", null, true, false, true, true); } }); 
      
OR SEARCH
 
  
 A B C D 
   
00010
 
0500
 
0000
 
20010
 
00910
 
00990