JQuery Ricerca di dati all'interno di input e selezionare

Question

Utilizzo di Jquery Datatables con input e seleziona come mostrato qui: http://datatables.net/examples/api/form.html oppure se ho utilizzato un gestore di rendering di colonne personalizzato per produrre l'input e seleziona come posso eseguire la ricerca di tabelle globali?

Se si visualizza l'esempio, si noterà che solo la prima colonna, la sola lettura, è inclusa nella ricerca, cosa posso fare per includere le altre colonne nella ricerca?

Se si visualizza l'esempio nel collegamento nella mia domanda e si digita "Tokyo" nella ricerca, vengono restituite tutte le righe. Questo perché "Tokyo" è un'opzione in tutti i menu a discesa. Vorrei solo le righe con Tokyo selezionate per mostrare. Se si digita "33" non si vede alcuna riga anche se la prima riga ha un valore di "33" nella prima colonna.

Non riesco a trovare alcuna documentazione su come definire quale sia il valore di ricerca per una determinata cella in un datatable.

Answer 1

Questo dovrebbe cercare l'intera tabella anziché le colonne specifiche.

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

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

Answer 2

Non è molto ben documentato. E sembra funzionare in modo diverso, o non funzionare affatto, tra (sotto) versioni. Penso che DataTables è destinato a rilevare automaticamente le colonne HTML, ma per qualche motivo, il più delle volte, non lo fa. Il modo più sicuro è quello di creare il proprio search-filtro:

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

Ciò restituirà su <input> 's con il valore di 33, e Tokyo su <select>' s in cui è selezionato Tokyo. Quindi definire le colonne desiderate al tipo html-input;

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

vedere una demo basata su http://datatables.net/examples/api/form.html ->http://jsfiddle.net/a3o3yqkw/

---

quanto riguarda i dati in tempo reale: Il problema è che solo il filtro in base tipo è chiamato volta. dataTables memorizza quindi nella cache i valori restituiti in modo da non dover "calcolare" tutti i valori più e più volte. Fortunatamente, dataTables 1.10.x ha una funzione integrata per cells, rows e pages chiamato invalidate che forza dataTables per reimpostare la cache per gli elementi selezionati.

Tuttavia, quando si ha a che fare con <input> c'è anche il problema, che la modifica del valore non sta cambiando l'attributo value stesso. Quindi, anche se chiami invalidate(), finirai comunque nel filtrare il vecchio valore "hardcoded".

Ma ho trovato una soluzione per questo.Forza il <input> 's attributo value di essere cambiato con l'<input>' s valore corrente (il nuovo valore) e poi chiamata invalidate:

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

Per textareas utilizzare text() invece:

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

Questo è anche il caso quando si tratta di <select>. Sarà necessario aggiornare l'attributo selected per le pertinenti <option> 's e poi invalidate() la cellula così:

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

biforcuta violino ->http://jsfiddle.net/s2gbafuz/ Prova contenuti cambiamento degli ingressi e/o menu di scorrimento e la ricerca per i nuovi valori ...

Answer 3

la cosa migliore da fare qui è solo aggiornare il contenitore delle cellule al nuovo valore dall'input e mantenere la sincronizzazione dei dati oggetto DataTable con l'ingresso UI:

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

Answer 4

Sostituisci l'input con Textarea e aggiungi il css di seguito. Renderà la tua textarea come un input.

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