DataTables

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap4.min.js"></script>


<select class="form-control form-control-sm mr-3" id="officeFilter">
    <option value="">No filter</option>
    <option value="London" selected>London</option>
    <option value="San Francisco">San Francisco</option>
    <option value="New York">New York</option>
    <option value="Sydney">Sydney</option>
</select>

<table id="example" class="display" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
</table>

JavaScript

$(document).ready(function() {
  InitializeDatatable();
  InitializeCodesDatatableSeachPlugin();

  $('#officeFilter').on('change', function() {
    $('#example').DataTable().draw();
  });
  $('#example').DataTable().draw();
});

function InitializeDatatable() {
  let ajaxData = GetAjaxData();
  var table = $('#example').DataTable({
    data: ajaxData,
    dom: "<'row'<'col-sm-12 col-md-4 toolbar'><'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'f>>" +
      "<'row'<'col-sm-12'tr>>" +
      "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
    columns: [{
        "data": "name"
      },
      {
        "data": "position"
      },
      {
        "data": "office"
      },
      {
        "data": "extn"
      },
      {
        "data": "start_date"
      },
      {
        "data": "salary"
      }
    ],
    deferRender: true,
    scrollX: true
  });

  $("div.toolbar").append($('#officeFilter'));
}

function InitializeCodesDatatableSeachPlugin() {
  //info about this search plugin: https://datatables.net/forums/discussion/64685/how-to-filter-hidden-column-by-dropdown-value-but-ignore-column-in-global-filter
  $.fn.dataTable.ext.search.push(
    function(settings, searchData, index, rowData, counter) {
      var searchVal = $('#officeFilter').val();
      console.log(searchVal)
      // Show all rows if select is empty - 'all'
      if (searchVal === '') {
        return true;
      }

      // Show only rows that match the select value
      if (searchVal === rowData['office'].toString()) {
        return true;
      }

      // Filter row if it doesn't match.
      return false;
    }
  );
}


function GetAjaxData() {
  let data = [{
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "2",
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
     ...