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,
      columns: [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ],
      deferRender: true,
      scrollX: true
    });   
    
    $("div.dataTables_length").prepend($('#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();

            // 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",
        "start_date": "2011/07/25",
        "office": "Tokyo",
        "extn": "8422"
      },
     ...