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">
    <label><b>Name:</b></label>
    <select id="selectTriggerFilter" class="form-control"></select>
  </div>

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

CSS

body {
  margin: 20px;
}

JavaScript

$(function() {
  $('#oppTable').DataTable({
    initComplete: function() {
      console.log('inside table init')
    },
    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;
      }
    }]
  });

  $('#oppTable').on('draw.dt', function() {
    alert('Table redraw');
  });

  $('#oppTable').on('init.dt', function(e, settings, json) {
    alert('Table initialized');

    var column = $(this).DataTable().column(0);

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

    column.data().unique().sort().each(function(data, index) {
      select.append('<option value="' + data + '">' + data + '</option>');
    });
  });
});