datatables column filters

HTML

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<html lang="en">
	<head>
		<title>Inventory Transactions</title>
		<link rel="STYLESHEET" type="text/css" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.css"/>
		<script src="https://code.jquery.com/jquery-3.7.1.js">
			<!--  -->
		</script>
		<script src="https://cdn.datatables.net/2.1.8/js/dataTables.js">
			<!--  -->
		</script>
		<script>
		<!--
		function refreshDTs() {
	setTimeout(function() {
	$.fn.dataTable.tables( { visible: true, api: true }).columns.adjust();
	},250);

}

function initDataTable(tableId, scrollY) {
	var useDataTables = true;
	if (scrollY == '') {
		scrollY = '80%';
	}
		
	var aTableE = $('#' + tableId);
	var isASTST = aTableE.hasClass("ast_st"); 
	var isLRST = aTableE.hasClass("lrst"); 
	var isIE = false;
	if (isASTST || isLRST || isIE) {
		useDataTables = false;
	}
	if (tableId == 'externalsoe') {
		useDataTables = false;
	}
	
	if (useDataTables) {
		if (tableId != '') {
			//Locked columns use the FixedColumns DataTables Extension
			var numLockedCols = $('#' + tableId + ' tr:eq(0) th.locked').length;
			
			/* IE JQuery Layout fix */
			if (isIE && numLockedCols > 0) {
				var numPaneWest = $('div.pane-west').length;
				if (numPaneWest > 0) {
					let heightSize = $(window).height() * 0.8;
					
					//scrollY='400px';
					scrollY = heightSize + 'px';
				}
			}
			
			aTableE.removeClass();
			aTableE.addClass('dataTable cell-border compact hover stripe');

			var aFixed;
			if (numLockedCols <= 0) {
				aFixed = false;
			} else if (numLockedCols > 0) { 
				aFixed = {left:numLockedCols, heightMatch: 'auto'};
			}
			
			var searchRow = $('#' + tableId + ' thead tr:eq(0)').clone(true);
			searchRow.appendTo( '#' + tableId + ' thead' );
			searchRow.attr('id', tableId + 'search');
			/*$('#' + tableId +...

CSS

.search-header {
    background: #dcdcdc;
}

JavaScript

// Create search header
var new_row = $("<tr class='search-header'/>");
$('#example thead th').each(function(i) {
  var title = $(this).text();
  var new_th = $('<th style="' + $(this).attr('style') + '" />');
  $(new_th).append('<input type="text" placeholder="' + title + '" data-index="'+i+'"/>');
  $(new_row).append(new_th);
});
$('#example thead').prepend(new_row);

// Init DataTable
var table = $('#example').DataTable({
  "scrollX": true,
  "searching": true,
});

// Filter event handler
$( table.table().container() ).on( 'keyup', 'thead input', function () {
  table
    .column( $(this).data('index') )
    .search( this.value )
    .draw();
});