[Vuejs]-Datatables – Search Box outside datatable (Laravel/Vue .js)

by

1👍

✅

The following approach will allow you to use a search box outside of the table. You should be able to adapt this to your specific code.

My data is in a table called “animals”:

<table id="animals" class="display dataTable cell-border" style="width:100%">
...
</table>

1) Set up the search field:

<div id="external_filter" class="dataTables_filter" style="margin: 20px 0;">
  <label>External Search:
    <input id="external_search" type="search" class="" placeholder="" aria-controls="animals">
  </label>
</div>

In this example, I use the same class (dataTables_filter) as the original filter box – you can use whatever you want.

2) Define a basic DataTable:

This is the minimum definition needed to show the technique – you can add all your extra controls, as you need:

$(document).ready(function() {

  var table = $('#animals').DataTable({
    "initComplete": function(settings, json) {
      $('#animals_filter').remove();
    }
  });

  $('#external_filter input').off().keyup(function () {
      table.search(this.value).draw();
  });

});

The initComplete function is used to hide the original search box. We want searching to still be enabled, so we can’t use "searching": false.

The $('#external_filter input') code handles searching for you. The data you enter into the search box is captured by this.value and is passed to the table’s search functionality.

The web page looks like this:

enter image description here

The overall code is as follows:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>External Search Box</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>

<body>

  <div style="margin: 20px;">

  <div id="external_filter" class="dataTables_filter" style="margin: 20px 0;">
    <label>External Search:
      <input id="external_search" type="search" class="" placeholder="" aria-controls="animals">
    </label>
  </div>

  <table id="animals" class="display dataTable cell-border" style="width:100%">
    <thead>
      <tr><th>Animal</th><th>Collective Noun</th><th>Language</th></tr>
    </thead>
    <tbody>
      <tr><td>antelopes</td><td>herd</td><td>English</td></tr>
      <tr><td>elephants</td><td>herd</td><td>English</td></tr>
      <tr><td>éléphants</td><td>troupeau</td><td>French</td></tr>
      <tr><td>Hounds</td><td>pack</td><td>English</td></tr>
      <tr><td>kittens</td><td>kindle</td><td>English</td></tr>
      <tr><td>lions</td><td>pride</td><td>English</td></tr>
      <tr><td>pingouins</td><td>colonie</td><td>French</td></tr>
      <tr><td>ravens</td><td>unkindness</td><td>English</td></tr>
      <tr><td>whales</td><td>pod</td><td>English</td></tr>
      <tr><td>zebras</td><td>herd</td><td>English</td></tr>
    </tbody>
  </table>

  </div>

  <script type="text/javascript">

    $(document).ready(function() {

      var table = $('#animals').DataTable({
        "initComplete": function(settings, json) {
          $('#animals_filter').remove();
        }
      });

      $('#external_filter input').off().keyup(function () {
          table.search(this.value).draw();
      });

    });
  </script>

</body>
</html>
👤andrewJames

Leave a comment