问题描述:

I'm working on a Phoenix web app and am trying to figure out a way to implement a global search box that is located in the nav bar that will point to and perform a search on a table located at /users that is built with DataTables. As I have it now, when I submit a search via the search bar, it redirects to /users but does not apply the search to the table.

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"] ]

} );

I found this in the DataTables API which I have placed in app.js:

$('#ee-search').on( 'keyup', function () {

table.search( this.value ).draw();

} );

I apologize ahead of time...my javascript skills are practically non-existent. How do I get the search input to apply to the DataTable? I assume there is a way to link the form submission/javascript code/DataTable? If you need more info or code, please let me know. Thanks!

网友答案:

There are three ways to pass data from one page to another without making a round trip to a server: GET data, cookies, and session variables in local storage. Of these, I'd start by using GET data.

So, read this question, which (is one example of many, and) explains how to pass data from one page to another using the GET mechanism. Basically, you have to add method="GET" to your form's attributes, and then parse the resulting querystring from your \users page.

Then, to perform the search, just call the search() method, passing your parsed string as an argument, and call the draw() method, so:

myTable.search( myTextString ).draw();

The DataTable will apply the search term, filter the results, and redraw the table.

相关阅读:
Top