JSFiddle - React, Tailwind, and code Playground

by Daniel Pegues

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<select id="custom-select-filter-1">
	<option value="">Please select filter 1...</option>
	<option value="one">One</option>
	<option value="two">Two</option>
	<option value="three">Three</option>
</select>

<select id="custom-select-filter-2">
	<option value="">Please select filter 2...</option>
	<option value="four">Four</option>
	<option value="five">Five</option>
	<option value="six">Six</option>
</select>

<table id="example">
	<thead>
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Category</th>
		</tr>
	</thead>
	<tbody>
		<tr data-testattribute1="one" data-testattribute2="four">
			<td>1</td>
			<td>Apples</td>
			<td>Fruit</td>
		</tr>
		<tr data-testattribute1="two" data-testattribute2="five">
			<td>2</td>
			<td>Oranges</td>
			<td>Fruit</td>
		</tr>
		<tr data-testattribute1="three" data-testattribute2="six">
			<td>3</td>
			<td>Lexus</td>
			<td>Cars</td>
		</tr>
		<tr data-testattribute1="one" data-testattribute2="five">
			<td>4</td>
			<td>Winchester</td>
			<td>Guns</td>
		</tr>
	</tbody>
</table>

JavaScript

$(document).ready(function(){
	
    $('#example').DataTable({
        order: [[1, 'Name']],
    });
	
	$('#custom-select-filter-1').on('change', function(){
		var selectVal = $(this).val();
		
		console.log(selectVal);
	});
	
	$('#custom-select-filter-2').on('change', function(){
		var selectVal = $(this).val();
		
		console.log(selectVal);
	});
});