Datentabelle: Mehr Kriterien Forschung von Eingabefeld

Question

Ich bin mit Datentabelle und ich möchte in der Tabelle von HTML-Eingaben suchen kann, die nicht im Zusammenhang Datentabelle

mein html:

<div id="general> 
<input type="text" id="name"/> 
<input type="text" id="lastname"/> 
<input type="text" id="birthday"/> 
<table id="table-search" class="display col-sm-4"> 
    <thead> 
    <tr> 
    <th>name</th> 
    <th>lastname</th> 
    <th>birthday</th> 
    <th>blah</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>john</td> 
     <td>doe</td> 
     <td>1970/1/1</td> 
     <td>bla bla</td> 
     <td>johnny</td> 
     <td>doenut</td> 
     <td>1970/1/1</td> 
     <td>bla bla</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

wenn ich john in name Eingang setzen + doe in lastname Eingang, wollen I Ergebnis haben:

|john|doe 
    |johnny|doenut 

I ma nage in der Tabelle mit fnFilter() suchen, aber ich kann keine Forschung wie: value1 AND value2 AND value3. Es löscht das vorherige valueX Ergebnis.

$('.general input').keyup(function() { 
    var name = $('#name').val(); 
    var lastname = $('#lastname').val(); 
    var birthday = $('#birthday').val(); 

     oTable.fnFilter(name+lastname+birthday); <-- i want a request like this 


    }) 

Answer 1

Sie können benutzerdefinierte Filter zu Tables hinzufügen, nur $.fn.dataTable.ext.search.push(); verwenden, aber es alle Ihre Filter passieren. Macht mehr Sinn, wenn Sie es sehen. Beispiel:

$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) { 
    var filterFirstName = $('#name').val(); 
    if(filterFirstName == '') { return true; } 
    return data[0].indexOf(filterFirstName) != -1; 
    }, 
    function(settings, data, dataIndex) { 
    var filterLastName = $('#lastname').val(); 
    if(filterLastName == '') { return true; } 
    return data[1].indexOf(filterLastName) != -1; 
    } 
); 

Dieser Code würde zwei Filter hinzufügen, einen für den Vornamen und einen für den letzten. Sie können sehen, dass der Wert der beiden Filtereingaben zuerst erhalten wird, wenn sie nicht auf irgendwas gesetzt sind, gibt sie true zurück (wenn alle Filter für eine Zeile als wahr übergeben werden, wird sie angezeigt, andernfalls wird sie ausgeblendet). Wenn der Filter einen Wert hat, können wir ihn mit dem Wert in der entsprechenden Spalte vergleichen (data hier ist ein Array der Daten in der aktuellen Zeile - 0 ist der Speicherort der ersten Spalte und 1 ist der Nachname Säule). Wenn die Werte nicht übereinstimmen, wird false zurückgegeben (wodurch die Spalte ausgeblendet wird). Wenn dies der Fall ist, wird true zurückgegeben (wenn alle Filter wahr sind, wird die Zeile angezeigt).

Dann haben Sie einfach die Tabelle für die Eingänge auf keyup neu zu zeichnen:

$('#general input').keyup(function() { 
    oTable.draw(); 
}); 

du hier in Aktion mit Ihren Daten sehen: https://jsfiddle.net/v7okphu3/