How to add a new input to perform the search in my datatable and also activate the searchHighlight?

Question

I'm trying to put a search bar for my datatables. I have to hide the search engine that has datatables by default but I added a script where I found in some forum that works correctly but when executed in my code it does not work, it shows an error in the console.

 
   var tables = $("#example").dataTable({
      "mark": true,
      "bPaginate": false,
      "showNEntries" : false,
      "bInfo" : false,
      "language": {
        "zeroRecords": "No se encontraron rutas"
      },
      'searchHighlight': true,
  });
    $("#seachBox").keyup(function () {
        tables.draw();
    });

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
    <label for="">Buscar:</label>
    <input style="margin: 10px;" id='seachBox' placeholder="Buscar">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

What I want to achieve is that my new input performs the search as the datatables input does but it gives me an error and I can't find the possible solution and also the 'searchHighlight': true doesn't work for me. Any recommendations please I'm new using datatables

score 0 · Answer 1 · answered Dec 19 '22 at 02:59

You need to include the highlighter libraries, which are listed on this page - but note, you need to add the https: protocol to the start of the URLs given in that page, for reasons explained here.

I recommend using dom: 'ti' as documented here to hide the default global search box (since you want to use your own search box instead). Specifically the f (filter) option is not listed - only the t and i options. But you can add others if you want to (e.g. if you decide you do want to use pagination).

Instead of dataTable({...}) use DataTable({...}). The difference is small - but worth understanding - see here for a description.

To use the external search box, you can use this:

$('#seachBox').keyup(function(){
  table.search( $(this).val() ).draw() ;
})

My code is a slightly updated version of the code in this existing answer.

Putting it all together, here is a demo - I deliberately excluded Bootstrap - but if you want to use it, you can grab the correct libraries from the official DataTables download page.

$(document).ready(function() {

    
  let table = $('#example').DataTable({
    dom: 'ti',
      searchHighlight: true  
  });

  $('#seachBox').keyup(function() {
    table.search($(this).val()).draw();
  })

});

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <title>DataTables - JS Bin</title>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css" />

  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

  <!-- for search highlighting -->
  <script type="text/javascript" src="https://bartaz.github.io/sandbox.js/jquery.highlight.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.13.1/features/searchHighlight/dataTables.searchHighlight.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/plug-ins/1.13.1/features/searchHighlight/dataTables.searchHighlight.css" />

</head>

<body>
  <div class="container" style="padding: 20px;">
    <label for="">Buscar:</label>
    <input style="margin: 10px;" id='seachBox' placeholder="Buscar">
    <table id="example" class="display nowrap" width="100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$3,120</td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td>Director</td>
          <td>Edinburgh</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$5,300</td>
        </tr>
        <tr>
          <td>Ashton Cox</td>
          <td>Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$4,800</td>
        </tr>
      </tbody>
    </table>
  </div>



</body>

</html>

Here is what it looks like with a search using the text ar:

How to add a new input to perform the search in my datatable and also activate the searchHighlight?

1 Answers1