datatables.mark.js column search example

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

by andrew45

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/united/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/mark.js/8.6.0/jquery.mark.min.js"></script>
<script src="https://cdn.jsdelivr.net/datatables.mark.js/2.0.0/datatables.mark.min.js"></script>
<h2><a href="https://github.com/julmot/datatables.mark.js/" target="_blank">datatables.mark.js</a> column search example</h2>

<div class="panel panel-default search">
  <div class="panel-heading">Search employees</div>
  <div class="panel-body">
    <div class="row">
      <div class="col-xs-6">
        <span>Name:</span>
        <input type="text" name="name" placeholder="Bradley..." class="form-control input-sm">
        <span>Office:</span>
        <input type="text" name="office" placeholder="London..." class="form-control input-sm">
      </div>
      <div class="col-xs-6">
        <span>Position:</span>
        <input type="text" name="position" placeholder="Software..." class="form-control input-sm">
        <span>Age:</span>
        <input type="number" name="age" placeholder="41..." class="form-control input-sm">
      </div>
    </div>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">Employees</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>
     ...

CSS

body {
  margin: 15px;
}

div.search span,
div.search input {
  display: block;
}

div.search input {
  margin-bottom: 5px;
}

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

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

.dataTables_filter {
  display: none;
}


/**
 * Styles for datatables.mark.js
 */

mark {
  background: orange;
  color: black;
  padding: 0;
}

JavaScript

$(function() {

  // Map inputs with columns (nth-child(X))
  var inputMapper = {
    "name": 1,
    "position": 2,
    "office": 3,
    "age": 4
  };

  // Initialize DataTables
  var dtInstance = $(".datatables-table").DataTable({
    // Set elements per page
    pageLength: 5,
    // Disable entry selection
    bLengthChange: false,
    // Enable datatables.mark.js highlighting
    mark: true
  });

  // Trigger DataTables redraw on search keyword change
  $("input").on("input", function() {
    var $this = $(this);
    var val = $this.val();
    var key = $this.attr("name");

    // Search inside DataTable column
    // subtract -1 because :nth-child starts with 1,
    // DataTables with 0
    dtInstance.columns(inputMapper[key] - 1).search(val).draw();
  });

});