Phoenix - Site-weite Suchfunktion mit DataTables

Question

Ich arbeite an einer Phoenix Web App und versuche herauszufinden, wie man ein globales Suchfeld in der Navigationsleiste implementiert, die auf eine Suche zeigt auf einer Tabelle unter /users, die mit DataTables erstellt wird. Wie ich es jetzt habe, wenn ich eine Suche über die Suchleiste einreiche, wird es auf /users umgeleitet, aber wendet die Suche nicht auf die Tabelle an.

app.html.eex (Layout):

<form id="custom-search-input" class="nav navbar-nav pull-right" action="/users"> 
    <div class="input-group"> 
    <input id="ee-search" type="text" name="search" class="form-control" placeholder="Employee Search" /> 
    <span class="input-group-btn"> 
     <button class="btn btn-info"> 
     <i class="fa fa-search"></i> 
     </button> 
    </span> 
    </div> 
</form> 

app.js:

$(document).ready(function() { 
    $('#employeeTable').DataTable(); 
}); 

var table = $('#employeeTable').DataTable({ 
    "lengthMenu": [ [15, 50, 75, 150, -1], [15, 50, 75, 150, "All"] ] 
}); 

Ich fand das in der Datentabellen, die API I in app.js gesetzt haben:

$('#ee-search').on('keyup', function() { 
    table.search(this.value).draw(); 
}); 

Ich entschuldige mich im Voraus ... meine Javascript-Fähigkeiten sind praktisch nicht existent. Wie bekomme ich die Sucheingabe für die DataTable? Ich nehme an, es gibt eine Möglichkeit, die Formularvorlage/JavaScript-Code/DataTable zu verknüpfen? Wenn Sie weitere Informationen oder Code benötigen, lassen Sie es mich bitte wissen. Vielen Dank!

Answer 1

Es gibt drei Möglichkeiten, Daten von einer Seite an eine andere zu übergeben, ohne einen Umlauf zu einem Server durchzuführen: GET-Daten, Cookies und Sitzungsvariablen im lokalen Speicher. Von diesen würde ich mit GET-Daten beginnen.

Also, lesen Sie this question, die (wie ein Beispiel von vielen, und) erklärt, wie Sie Daten von einer Seite zu einer anderen mit dem GET-Mechanismus übergeben. Im Grunde müssen Sie method="GET" zu den Attributen Ihres Formulars hinzufügen und dann den resultierenden Querystring von Ihrer \users-Seite analysieren.

, dann die Suche durchzuführen, rufen Sie einfach die search() Methode, Ihre analysierte Zeichenfolge als Argument übergeben, und rufen Sie die draw() Methode, so:

myTable.search(myTextString).draw(); 

Die Datentabelle wird den Suchbegriff gelten, filtern die Ergebnisse, und zeichnen Sie die Tabelle neu.