DataTables.net - search

by Vasil Svetoslavov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Table options:
<ul>
  <li>
    <input type="checkbox" checked="checked" id="optSearchButtCol" onchange="initTable();">
    <label for="optSearchButtCol">
      Search in buttons column
      <br/>
      <small>Search for 0, 1, 2, 3 or 4 to test </small>
    </label>
  </li>
</ul>
<table id="myTable" class="table table-striped table-bordered table-hover table-condensed">
  <thead>
    <tr>
      <th>Id</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Johnatan</td>
      <td>Baker</td>
      <td>
        <button id="myTable:0:button" onclick="btn0Click()" class="btn btn-danger btn-xs">
          <i class="fa fa-trash fa-fw"></i></button>
        <script>
          function btn0Click() {
            if (0 === 0) {
              alert('0');
            }
          }

        </script>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Marianne</td>
      <td>Lewis</td>
      <td>
        <button id="myTable:1:button" onclick="btn1Click()" class="btn btn-danger btn-xs">
          <i...

CSS

table {
  width: 100%;
}

JavaScript

function initTable() {
  $('#myTable').DataTable().destroy();

  var optSearchButtons = $('#optSearchButtCol').prop('checked');
  //alert(optSearchButtons);
  $('#myTable').dataTable({
    columns: [null, null, null, (optSearchButtons ? null : {
      searchable: false
    })]
  });
}

$(document).ready(function() {
  initTable();
});