JQuery Datatables recherche en entrée et sélectionnez
En utilisant Jquery Datatables avec des entrées et sélectionne comme indiqué ici: http://datatables.net/examples/api/form.html ou si j'ai utilisé un gestionnaire de rendu de colonne personnalisé pour produire l'entrée et sélectionne comment puis-je faire fonctionner la recherche de table globale ?
Si vous voyez l'exemple, vous remarquerez que seule la première colonne, la seule en lecture, est incluse dans la recherche, que puis-je faire pour inclure les autres colonnes dans la recherche?
Si vous voyez l'exemple dans le lien dans ma question et tapez "Tokyo" dans la recherche, toutes les lignes sont retournées. C'est parce que "Tokyo" est une option dans tous les menus déroulants. Je voudrais seulement des lignes avec Tokyo sélectionné pour montrer. Si vous tapez "33", vous ne voyez pas de lignes même si la première ligne a une valeur de "33" dans la première colonne.
Je ne peux pas trouver de documentation sur la façon de définir quelle est la valeur de recherche pour une cellule particulière dans une base de données.
Il n'est pas très bien documenté. Et il semble fonctionner différemment, ou ne fonctionne pas du tout, entre les (sous) versions. Je pense que DataTables est destiné à détecter automatiquement les colonnes HTML, mais pour une raison quelconque, la plupart du temps, ce n'est pas le cas. Le moyen le plus sûr est de créer votre propre filtre de recherche:
$.fn.dataTableExt.ofnSearch['html-input'] = function(value) { return $(value).val(); }; Cela renverra 33 sur <input> avec la valeur 33, et Tokyo sur <select> où Tokyo est sélectionné. Ensuite, définissez les colonnes souhaitées comme de type html-input ;
var table = $("#example").DataTable({ columnDefs: [ { "type": "html-input", "targets": [1, 2, 3] } ] });
Voir la démo en fonction de http://datatables.net/examples/api/form.html -> http://jsfiddle.net/a3o3yqkw/
Mise à jour . Le problème est que le filtre à base de type n'est appelé qu'une seule fois . DataTables met en cache les valeurs renvoyées afin qu'il ne soit pas nécessaire de "calculer" toutes les valeurs à plusieurs reprises. Heureusement, dataTables 1.10.x possède une fonction intégrée pour les cells , les rows et les pages appelées invalidate qui obligent les DataTables à réinitialiser le cache pour les éléments sélectionnés.
Cependant, en traitant de <input> 's, il y a aussi le problème, que l'édition de la valeur ne change pas l'attribut de value lui-même. Donc, même si vous appelez invalidate() , vous finirez toujours par filtrer sur l'ancienne valeur "hardcoded".
Mais j'ai trouvé une solution pour cela. Forcez l'attribut de la value <input> à changer avec la valeur actuelle <input> (la nouvelle valeur) et puis appelez invalidate :
$("#example td input").on('change', function() { var $td = $(this).parent(); $td.find('input').attr('value', this.value); table.cell($td).invalidate().draw(); });
C'est également le cas lorsqu'il s'agit de <select> 's. Vous devrez mettre à jour l'attribut selected pour les <option> pertinentes, puis invalidate() la cellule aussi:
$("#example td select").on('change', function() { var $td = $(this).parent(); var value = this.value; $td.find('option').each(function(i, o) { $(o).removeAttr('selected'); if ($(o).val() == value) $(o).attr('selected', true); }) table.cell($td).invalidate().draw(); });
Violon à fourchette -> http://jsfiddle.net/s2gbafuz/ Essayez de modifier le contenu des entrées et / ou des menus déroulants, et recherchez les nouvelles valeurs …
Cela devrait rechercher toute la table au lieu de la (les) colonne (s) spécifique (s).
var table = $('#table').DataTable(); $('#input').on('keyup', function() { table.search(this.val).draw(); });
La meilleure chose à faire ici est simplement mettre à jour le conteneur de la cellule à la nouvelle valeur à partir de l'entrée et conserver la synchronisation de l'objet de données datat avec l'entrée UI:
$("#pagesTable td input,#pagesTable td select").on('change', function () { var td = $(this).closest("td"); dataTable.api().cell(td).data(this.value); });
Remplacez-le par Textarea et ajoutez le css ci-dessous. Cela fera que votre espace de texte ressemble à une entrée.
textarea{ height: 30px !important; padding: 2px; overflow: hidden; }