const dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000"],
["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500"],
["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900"],
["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500"],
];
const dataTable = $('#example').DataTable({
data: dataSet,
dom: 't',
columns: ['Name', 'Job Title', 'Location', 'Id', 'Hire Date', 'Salary'].map(header => ({
title: header
})),
initComplete: function () {
//purge existing <tfoot> if exists
$('#example tfoot').remove();
//append new footer to the table
$('#example').append('<tfoot><tr></tr></tfoot>');
//iterate through table columns
this.api().columns().every(function () {
//append <select> node to each column footer inserting
//current column().index() as a "colindex" attribute
$('#example tfoot tr').append(`<th><select colindex="${this.index()}"></select></th>`);
//grab unique sorted column entries and translate those into <option> nodes
const options = this.data().unique().sort().toArray().reduce((options, item) => options += `<option value="${item}">${item}</option>`, '<option value=""></option>');
//append options to corresponding <select>
$(`#example tfoot th:eq(${this.index()}) select`).append(options);
});
}
});
$('#example').on('change', 'tfoot select', function (event) {
//use "colindex" attribute value to search corresponding column for selected option value
dataTable.column($(event.target).attr('colindex')).search($(event.target).val()).draw();
})
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="example"></table>
</body>
</html>