DataTable Column Select Filter

by Alen Subasic

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
<div class="container-fluid">
  <div class="form-group">
    <p id="selectTriggerFilter"><label><b>Name:</b></label><br></p>
  </div>

  <table id="occsTable" class="table table-striped" width="100%"></table>
</div>

CSS

body {
  margin: 20px;
}

JavaScript

$(function() {
  $('#occsTable').DataTable({
    initComplete: function() {
      var column = this.api().column(0);
      var select = $('<select class="form-control"><option value=""></option></select>')
        .appendTo('#selectTriggerFilter')
        .on('change', function() {
          var val = $(this).val();
          column.search(val ? '^' + $(this).val() + '$' : val, true, false).draw();
        });

      column.data().unique().sort().each(function(d, j) {
        select.append('<option value="' + d + '">' + d + '</option>');
      });
    },
    ajax: {
      url: "https://api.myjson.com/bins/mbgnk",
      dataSrc: function(res) {
        return res;
      }
    },
    columns: [{ // 0
      title: "Opportunity Name",
      className: 'opp-name-col',
      render: function(data, type, row) {
        return row.OpportunityName;
      }
    }, { // 1
      title: "Business",
      className: "business-col hidden-xs hidden-sm hidden-md",
      render: function(data, type, row) {
        return row.BusinessName;
      }
    }, { // 2
      title: "Type",
      className: "opp-type-col hidden-xs hidden-sm hidden-md",
      render: function(data, type, row) {
        return row.Type.OpportunityType;
      }
    }, { // 3
      title: "City",
      className: "city-col hidden-xs hidden-sm hidden-md",
      render: function(data, type, row) {
        return row.AddressList[0].City;
      }
    }]
  });
});