JQuery Datatables de recherche au sein d'entrée et sélectionnez

Il n'est pas très bien documenté. Et il semble fonctionner différemment, ou pas, entre les (sous -) versions. Je pense que les tables de données est conçu pour détecter automatiquement HTML-colonnes, mais pour une raison quelconque, la plupart du temps, il ne marche pas. Le moyen le plus sûr est de créer votre propre recherche-filtre :

$.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
    return $(value).val();
};

Ce sera le retour de 33 sur <input>'s avec la valeur 33, et Tokyo sur <select>'s où Tokyo est sélectionné. Ensuite, définir le degré de colonnes de type html-input ;

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

voir 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, c'est que le type de filtre qu'est appelé une fois. dataTables puis met en cache les valeurs renvoyées donc il a pas besoin de "calculer" l'ensemble des valeurs de plus et plus. Heureusement, dataTables 1.10.x a une fonction intégrée pour cells, rows et pages appelé invalide que les forces de tables de données pour réinitialiser le cache pour les objets sélectionnés.

Cependant, face <input>s'il y a aussi le problème, que le fait de modifier la valeur n'est pas la modification de la value attribut lui-même. Donc, même si vous appelez invalidate(), vous serez toujours à la fin dans le filtrage sur le vieux "codé en dur" de la valeur.

Mais j'ai trouvé une solution pour ce. La Force de la <input>'s value attribut à modifier avec le <input>'s valeur actuelle (la nouvelle valeur) et puis appel 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 textareas utilisation text() à la place :

$("#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 lorsque l'on traite avec <select>s'. Vous aurez besoin de mettre à jour le selected attribut de la <option>'s et puis invalidate() la cellule ainsi :

$("#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();
}); 

fourche violon> http://jsfiddle.net/s2gbafuz/ Essayer de changer le contenu des entrées et/ou les listes déroulantes, et à la recherche de nouvelles valeurs ...

Meilleure chose à faire ici est de simplement mettre à jour la cellule contenant la nouvelle valeur de l'entrée et de garder la datatable objet de données de synchronisation avec l'INTERFACE d'entrée:

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

Si le point ici est de rechercher à travers toutes les entrées dans un tableau basé sur des valeurs (et "régulière" de cellules), vous pouvez construire votre propre recherche personnalisée ($.fn.DataTable.ext.de recherche.push()):

//custom search function
$.fn.DataTable.ext.search.push((_,__,i) => {
  //get current row
  const currentTr = dataTable.row(i).node();
  //look for all <input>, <select> nodes within 
  //that row and check whether current value of
  //any of those contains searched string
  const inputMatch = $(currentTr)
    .find('select,input')
    .toArray()
    .some(input => $(input).val().toLowerCase().includes($('#search').val().toLowerCase()));
  //check whether "regular" cells contain the
  //value being searched
  const textMatch = $(currentTr)
    .children()
    .not('td:has("input,select")')
    .toArray()
    .some(td => $(td).text().toLowerCase().includes($('#search').val().toLowerCase()))
  //make final decision about match
  return inputMatch || textMatch || $('#search').val() == ''
});

La complète DÉMO de cette approche vous pouvez trouver ci-dessous:

JS:

//sample data
const srcData = [
{id: 1, item: 'apple', category: 'fruit'},
{id: 2, item: 'banana', category: 'fruit'},
{id: 3, item: 'goosberry', category: 'berry'},
{id: 4, item: 'eggplant', category: 'vegie'},
{id: 5, item: 'carrot', category: 'vegie'}
];
//DataTables initialization
const dataTable = $('table').DataTable({
//minimal table config for a cleaner view
dom: 't',
data: srcData,
columns: [
{
title: 'Id',
data: 'id'
},
{
title: 'Item', 
data: 'item',
//render 2-nd column cells as <input>
render: data => `<input value="${data}"></input>`
},
{
title: 'Category', 
data: 'category',
//render 3-rd column cells as <select>
render: data => `<select>${['fruit', 'vegie', 'berry'].reduce((options, item) => options+='<option value="'+item+'" '+(item == data ? 'selected' : '')+'>'+item+'</option>', '<option value=""></option>')}</select>`
}
]
});
//custom search function
$.fn.DataTable.ext.search.push((_,__,i) => {
//get current row
const currentTr = dataTable.row(i).node();
//look for all <input>, <select> nodes within 
//that row and check whether current value of
//any of those contains searched string
const inputMatch = $(currentTr)
.find('select,input')
.toArray()
.some(input => $(input).val().toLowerCase().includes( $('#search').val().toLowerCase()));
//check whether "regular" cells contain the
//value being searched
const textMatch = $(currentTr)
.children()
.not('td:has("input,select")')
.toArray()
.some(td => $(td).text().toLowerCase().includes($('#search').val().toLowerCase()))
//make final decision about match
return inputMatch || textMatch || $('#search').val() == ''
});
//trigger custom search upon search bar keyup
$('#search').on('keyup', () => dataTable.draw());

HTML:

<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<input id="search"></input>
<table></table>
</body>
</html>