Les traigo un ejemplo práctico de una tabla en DataTable en jquery.
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<meta http-equiv=»X-UA-Compatible» content=»IE=edge»>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Document</title>
<link href=»https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css» rel=»stylesheet» type=»text/css»>
<script src=»https://code.jquery.com/jquery-3.6.1.js» integrity=»sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=» crossorigin=»anonymous»></script>
<script src=»https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js» ></script>
</head>
<body>
<table id=»table_id» class=»display»>
<thead>
<tr>
<th>Nombre</th>
<th>mail</th>
<th>fecha</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Toni</td>
<td>toni@toni.com</td>
<td>5-5-2005</td>
<td><button onclick=»»>Editar</button></td>
</tr>
<tr>
<td>Eva</td>
<td>eva@eva.eva</td>
<td>5-5-2005</td>
<td><button onclick=»»>Editar</button></td>
</tr>
<tr>
<td>Pepe</td>
<td>pepe@pepe.com</td>
<td>6-02-1966</td>
<td><button onclick=»»>Editar</button></td>
</tr>
<tr>
<td>Jessica</td>
<td>jes@jes.jes</td>
<td>5-01-2015</td>
<td><button onclick=»»>Editar</button></td>
</tr>
<tr>
<td>Josep</td>
<td>josep@josep.jos</td>
<td>15-08-2005</td>
<td><button onclick=»»>Editar</button></td>
</tr>
</tbody>
</table>
<script>
$(document).ready( function () {
$(‘#table_id’).DataTable();
} );
</script>
</body>
</html>