Phoenix - Site-wide Search Functionality Using DataTables

Question

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!

You should be able to reference your `table` variable the way you're trying to if you define it where your `keyup` handler can see it. You might want to put a breakpoint on your table.search line and evaluate table to see if it's undefined. Learning javascript, in my experience, is partly a matter of looking up syntax and partly a matter of walking around in the DOM objects to see what's really there. — BobRodes, Jul 23 '16 at 03:14
Perhaps I didn't understand your question clearly last post. Is the search box that the user types in on a different page from the table that displays the filtered results? — BobRodes, Jul 23 '16 at 07:51
@BobRodes yes the search box is on a static nav bar that can be accessed from anywhere. The `/users` page is basically an employee directory and I'm trying to make it accessible from anywhere on the site. — jsonkenl, Jul 23 '16 at 17:04

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

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.

edited May 23 '17 at 12:14

Community

1
1

answered Jul 23 '16 at 17:28

BobRodes

5,990
2
24
26

Thanks for the help! I've got it to the point now where it parses the GET params and enters it as the value of the search box on the `/users` page, however, it doesn't submit the search. Is there some additional code I need to add to the jQuery that will actually submit the search? I tried to add .submit() but that didn't seem to work. – jsonkenl Jul 24 '16 at 01:11
You need to use the `filter()` method to apply the search criteria. Sorry, I missed that, naively thought that just plugging the text in would apply the filter. Edited my post. – BobRodes Jul 24 '16 at 01:41
I see where you were going with `filter()`, however, the `search()` method provided the results I was looking for. I updated your answer to reflect this. Thanks again for the help! – jsonkenl Jul 24 '16 at 04:07
Outstanding. I didn't quite like filter, since it applied to specific columns. `search` is exactly the thing to use. Good find! I've further updated the answer to remove the the stuff about programmatic updating of the search box, since the `search` method handles it. In the end, it's quite simple. – BobRodes Jul 24 '16 at 04:21

Phoenix - Site-wide Search Functionality Using DataTables

1 Answers1