Display table with search and filter functionality
HTML
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
<link href="https://cdn.datatables.net/v/dt/dt-2.3.2/cc-1.0.4/datatables.min.css" rel="stylesheet" integrity="sha384-BKn82lk5LgVs+smmSVLm4fGSgcZZlcfVgkYttmFbVStToL3H8Vt+0fQWYNKoN7UF" crossorigin="anonymous">
<script src="https://cdn.datatables.net/v/dt/dt-2.3.2/cc-1.0.4/datatables.min.js" integrity="sha384-Y9F4P6Qj9m3E7h09Z10DfQaPm47D1KVcuxdx7+gjlePfsimEv6Qod7PoerTCOQJt" crossorigin="anonymous"></script>
<body>
<form>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Harry Depp</td>
<td>28</td>
<td>Britain</td>
</tr>
<tr>
<td>John Smith</td>
<td>35</td>
<td>USA</td>
</tr>
<tr>
<td>Ram Krishna</td>
<td>19</td>
<td>Nepal</td>
</tr>
</tbody>
</table>
</form>
</body>
JavaScript
$('table').DataTable({
columnControl: ['order', ['searchList', 'spacer', 'search']]
})