datatables.mark.js global search example

This fiddle demonstrates how to use julmot/mark.js and julmot/datatables.mark.js for a global search using DataTables

by yassinezerguine

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/united/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/mark.js/8.1.1/jquery.mark.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.12/features/mark.js/datatables.mark.min.js"></script>

<div class="panel panel-default">
  <div class="panel-heading">Search</div>
  <div class="panel-body">
    <table class="datatables-table table table-striped table-hover table-bordered">
      <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>$320,800</td>
        </tr>
        
      </tbody>
    </table>


  </div>
</div>


<div class="panel panel-default">
  <div class="panel-body">
    <p>
      <small>Demo by <a href="https://github.com/julmot" target="_blank">Julian Motz</a></small>
    </p>
  </div>
</div>

CSS

body {
  margin: 15px;
}

div.search span {
  display: block;
}

div.panel {
  margin-bottom: 15px;
}

div.panel .panel-body p:last-child {
  margin-bottom: 0;
}

/**
 * Styles for datatables.mark.js
 */
mark {
  padding: 0;
  background: #f1c40f;
}

JavaScript

$(function() {

  // Initialize DataTables
  $('.datatables-table').DataTable({
    // Enable mark.js search term highlighting
    mark: true
  });

});