kennellroxco kennellroxco - 1 year ago 108
HTML Question

Phoenix - Site-wide Search Functionality Using DataTables

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

that is built with DataTables. As I have it now, when I submit a search via the search bar, it redirects to
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>


$(document).ready( function () {
} );

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 () { this.value ).draw();
} );

I apologize ahead of 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!

Answer Source

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, simply enter the search string programmatically in the datatables search box. The relevant markup looks like this:

<div id="myTableName_filter" class="dataTables_filter">
        <input type="search">

Once you parse the resulting querystring and assign to a var (i.e. myTextString), apply the following to the .js file: myTextString ).draw();

The DataTable will automatically apply the search term and filter the results.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download