Quisiera agregar los filtro que ofrece jquery a mi tabla, cabe decir que mi tabla ya se llena con datos reales que se reciben del controlador Empleado en la function reporte, esta me regresa una lista y es la misma que recorro para poner los datos en la filas, esto funciona sin ningun problema, el problema es que he visto que con solo las siguientes lineas ya se ponen los filtros, pero en mi caso si ya cargo los datos en que lugar o como deberia poner esas lineas
$(document).ready( function () {
$('#myTable').DataTable();
} );
function Empleado() {
$.ajax({
type: "POST",
url: '/Empleado/reporte?id=' + id,
dataType: "json",
contentType: "application/json; charset=utf-8",
})
.done(function (lista) {
$('#table').append(//recorremos la lista llenando la tabla
'<tr>' +
'<td align="center">' + lista[0] + '</td>' +
'<td align="center">' + lista[1] + '</td>' +
'<td align="center">' + lista[2] + '</td>' +
'<td align="center">' + lista[3] + '</td>' +
'</tr>'
);
}
});
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="table table-striped table-bordered table-responsive">
<thead>
<tr>
<th style="width:100px;">column1</th>
<th style="width:100px;">column2</th>
<th style="width:100px;">column3</th>
<th style="width:100px;">column4</th>
</tr>
</thead>
<tbody id="table">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>