DataTable column search

HTML

<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>ID </th>
        <th>
          <div id="customerType">
            Type
          </div>
          
          <div class="type d-none" id="typeMenu">
            <button class="mb-1" id="sorter">
              Sorter
            </button>
            <div class="mb-1">
            Select show type
            </div>
            <div class="mb-1">
              <input type="checkbox" value="A" class="mr-1" checked="checked">
              <span>A</span>
            </div>
            <div class="mb-1">
              <input type="checkbox" value="B" class="mr-1" checked="checked">
              <span>B</span>
            </div>
            <div class="mb-1">
              <input type="checkbox" value="C" class="mr-1" checked="checked">
              <span>C</span>
            </div>
            <div class="mb-1">
              <input type="checkbox" value="D" class="mr-1" checked="checked">
              <span>D</span>
            </div>
            <button id="closeTypeMenu">
              Close
            </button>
          </div>

</div>
</th>
<th>Name</th>
<th>Position</th>
</tr>
</thead>


<tbody>
  <tr>
    <td>50</td>
    <td>C</td>
    <td>Jennifer Acosta</td>
    <td>Junior Javascript Developer</td>
  </tr>
  <tr>
    <td>51</td>
    <td>A</td>
    <td>Cara Stevens</td>
    <td>Sales Assistant</td>
  </tr>
  <tr>
   ...

CSS

#typeMenu{
  margin-top:10px;
}

#customerType {

  cursor: pointer;
}


.type {
  position: absolute;
  background-color: beige;
  width: 150px;
  border: 1px solid;
  padding: 5px;
}

.d-none {
  display: none;
}

JavaScript

$(function() {

  var table = $('#example').DataTable({
    columns: [
      //
      {},
      {
        orderable: false
      },
      {},
      {},
    ],
  });

  table.order.listener('#sorter', 1);

  $('#customerType').on('click', function() {
    $('#typeMenu').removeClass('d-none');
  });

  $('#closeTypeMenu').on('click', function() {
    $('#typeMenu').addClass('d-none');
  });

});