diff --git a/swh/web/ui/templates/symbols.html b/swh/web/ui/templates/symbols.html
index e94e6485..40413321 100644
--- a/swh/web/ui/templates/symbols.html
+++ b/swh/web/ui/templates/symbols.html
@@ -1,64 +1,76 @@
 {% extends "layout.html" %}
 {% block title %}Search SWH{% endblock %}
 {% block content %}
 
 <div class="container">
   <!-- Include the predefined search form-->
   {% include 'includes/search-form.html' %}
 
   {% if result is not none %}
   <br />
   <div class="table-responsive">
     <table class="table table-striped search-res swhtable">
       <thead>
         <tr>
           <th>name</th>
           <th>content</th>
           <th>kind</th>
           <th>language</th>
         </tr>
       </thead>
       <tfoot>
         <tr>
           <th>name</th>
           <th>content</th>
           <th>kind</th>
           <th>language</th>
         </tr>
       </tfoot>
       <tbody>
       {% for res in result %}
         <tr>
           <td>{{ res['name'] | truncate(50) }}</td>
           <td><a href="{{ ('%s#l-%s' % (res['content_url'], res['line'])) }}">{{ res['sha1'] }}</a></td>
           <td>{{ res['kind'] }}</td>
           <td>{{ res['lang'] }}</td>
         </tr>
       {% endfor %}
       </tbody>
     </table>
 
   {% if linknext is not none and linknext != '' %}
     <br />
     <span><a href="{{ linknext }}">Next</a></span>
   {% endif %}
 
   {% endif %}
   {% if message is not none and message != '' %}
   <div class="span8">{{ message | safe }}</div>
   {% endif %}
 </div>
 
 <script type="text/javascript">
   $(document).ready(function() {
-      // basic setup
-      // $('table.swhtable').DataTable();
-      // more complex setup
-      $('table.swhtable').DataTable({
-        // "lengthMenu": [[2, 4, 6, -1], [2, 4, 6, "All"]],
-        "pagingType": "numbers"
+      // Setup - add a text input to each footer cell
+      $('table.swhtable tfoot th').each( function () {
+          var title = $(this).text();
+          $(this).html('<input type="text" placeholder="Search '+title+'" />');
+      });
+
+      // DataTable
+      var table = $('table.swhtable').DataTable();
+
+      // Apply the search
+      table.columns().every(function () {
+          var that = this;
+
+          $('input', this.footer()).on('keyup change', function () {
+              if (that.search() !== this.value) {
+                  that.search(this.value).draw();
+              }
+          });
       });
   });
 </script>
 
 {% endblock %}