anpassen „Suche“ Datatable JQuery

Question

Ich möchte die Suche Eigentum von Datatable jquery ändern:

In diesem Beispiel: https://datatables.net/examples/api/multi_filter.html Es gibt mehrere Eingabetextfelder am unteren Rand des Datatable, jeder von ihnen ist ein Filter für die entsprechende Spalte.

Was ich erreichen möchte, ist, diese Eingabe Textfelder aus der DataTable herausnehmen, weil ich mein eigenes Formular mit diesen Eingabetextfeldern mit anderen Layout erstellen möchte. (Ich wünsche, die Vorteile der schnellen Reaktion des „Suche“ Eigentums nehmen für mehr Dynamik zu meiner Form zu geben)

Was ich glaube, ist, dass dieser Teil des Codes im Beispiel:

$('#example tfoot th').each(function() { 
    var title = $(this).text(); 
    $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
}); 

sein kann ersetzen für meine eigenen einfachen HTML-Eingabetextfelder in anderem Ort der Web-Seite:

<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 

Aber, was ich herausfinden, nicht ist, wie dieser Teil des Codes zu ändern

table.columns().every(function() { 
     var that = this; 

     $('input', this.footer()).on('keyup change', function() { 
      if (that.search() !== this.value) { 
       that 
        .search(this.value) 
        .draw(); 
      } 
     }); 
    }); 

Ich hat versucht, meine eigenen Eingabetextfelder zu verwenden, so ersetzen ich die Zeile:

$('input', this.footer()).on('keyup change', function() { 

Von:

$('input.test').on('keyup change', function() { alert('inside') 

Nach einigen Tests mit eigenen Eingabetextfeldern und Debugging mit Warnungen Aussagen, Ich habe festgestellt, dass diese Funktion so oft ausgeführt wird, wie viele Eingabetextfelder existieren, weil sie alle die Klasse "test" haben. Aber irgendwie funktioniert die Eigenschaft "Suchen" in diesen Eingabetextfeldern nicht.

Können Sie mir Tipps geben, wie Sie diese DataTable ändern können, um mein Ziel zu erreichen?

Answer 1

Sie können es so machen, dass ein input mit einer bestimmten Spalte verbunden ist. Das heißt, es wird nur die Spalte filtern, die Sie

HTML angeben:

<input id="column_3_search" type="text" placeholder="Search " class="test" /> 

JS:. var table = $ ('# Beispiel') Datatable();

$('#column_3_search').on('keyup', function() { 
    table 
     .columns(3) 
     .search(this.value) 
     .draw(); 
}); 

Dies wird Text in Ihrem input getippt lassen Sie Ihre Tabelle nur auf den Werten in der Spalte 3