web-dev-qa-db-fra.com

JQuery Datatables recherche dans l'entrée et sélectionne

Utilisation de Jquery Datatables avec les entrées et les sélections 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 la sélection Comment puis-je faire fonctionner la recherche de table globale?

Si vous visualisez l'exemple, vous remarquerez que seule la première colonne, celle en lecture seule, est incluse dans la recherche. Que puis-je faire pour inclure les autres colonnes dans la recherche? 

Si vous visualisez l'exemple dans le lien de ma question et tapez "Tokyo" dans la recherche, toutes les lignes sont renvoyées. C'est parce que "Tokyo" est une option dans toutes les listes déroulantes. Je voudrais que seules les lignes avec Tokyo soient sélectionnées pour être affichées. Si vous tapez "33", vous ne voyez aucune ligne même si la première ligne a la valeur "33" dans la première colonne.

Je n'arrive pas à trouver de documentation sur la manière de définir la valeur de recherche d'une cellule donnée dans un datatable.

javascriptjquerydatatables
12
kralco626

Ce n'est pas très bien documenté. Et cela semble fonctionner différemment, ou pas du tout, entre (sous) versions. Je pense que dataTables est conçu pour détecter automatiquement les colonnes HTML, mais pour une raison quelconque, la plupart du temps, cela ne fonctionne pas. 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é. Définissez ensuite les colonnes souhaitées à partir du type html-input;

var table = $("#example").DataTable({
    columnDefs: [
       { "type": "html-input", "targets": [1, 2, 3] }
    ] 
});

voir la démo basée sur http://datatables.net/examples/api/form.html ->http://jsfiddle.net/a3o3yqkw/

Concernant les données en direct : Le problème est que le filtre basé sur le type uniquement s'appelle une fois. dataTables met ensuite en cache les valeurs renvoyées afin qu'il ne soit pas nécessaire de "calculer" toutes les valeurs encore et encore. Heureusement, dataTables 1.10.x a une fonction intégrée pour cells, rows et pages appelée invalidate qui force dataTables à réinitialiser le cache pour les éléments sélectionnés. 

Cependant, quand on traite avec <input>, il y a aussi le problème, que l'édition de la valeur ne change pas l'attribut value lui-même. Ainsi, même si vous appelez invalidate(), vous finirez toujours par filtrer sur l'ancienne valeur "codée en dur". 

Mais j'ai trouvé une solution pour cela. Forcer l'attribut value de <input> à changer avec la valeur actuelle de <input> (la nouvelle valeur) et alors call invalidate:

$("#example td input").on('change', function() {
  var $td = $(this).closest('td');
  $td.find('input').attr('value', this.value);
  table.cell($td).invalidate();
});

Pour les zones de texte, utilisez plutôt text():

$("#example td textarea").on('change', function() {
  var $td = $(this).closest('td');
  $td.find('textarea').text(this.value);
  table.cell($td).invalidate(); 
});

C'est également le cas lorsqu'il s'agit de <select>. Vous devrez également mettre à jour l'attribut selected pour les <option> pertinents, puis invalidate() la cellule:

$("#example td select").on('change', function() {
  var $td = $(this).closest('td');
  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();
});

forked fiddle ->http://jsfiddle.net/s2gbafuz/Essayez de modifier le contenu des entrées et/ou des menus déroulants et de rechercher les nouvelles valeurs ... 

20
davidkonrad

La meilleure chose à faire ici consiste simplement à mettre à jour le conteneur de cellules avec la nouvelle valeur de l'entrée et à maintenir la synchronisation de l'objet de données datatable avec l'entrée de l'interface utilisateur:

$("#pagesTable td input,#pagesTable td select").on('change', function () {
   var td = $(this).closest("td");
   dataTable.api().cell(td).data(this.value);
});
0
Dayan Roee

Ceci devrait rechercher la table entière au lieu de colonnes spécifiques.

var table = $('#table').DataTable();

$('#input').on('keyup', function() {
  table.search(this.val).draw();
});
0
Wild Beard

Remplacez votre saisie par Textarea , et ajoutez le css ci-dessous. Cela fera que votre textarea ressemble à une entrée.

textarea{
    height: 30px !important;
    padding: 2px;
    overflow: hidden;
}
0
Ricardo Gellman