Tengo un problema con una tabla que muestro en HTML pero cargo sus datos con una petición AJAX y le estoy intentando agregar una paginacion a dicha tabla, para la paginacion estoy intentando usar DataTables, el problema es que si agrego la funcion de DataTables para mostrar paginacion apesar de que la tabla si contiene un td me dice que no estoy mostrando ningun row y aparte cuando selecciono algún filtro en la tabla el contenido desaparece, no se como pueda configurar mi tabla para agregar una paginacion.
Este es el cuerpo HTML donde tengo mi tabla:
<div class="tabla_ingresos">
<table class="table_ingresos display" id="table_ingresos">
<thead>
<th>#</th>
<th>Fecha de aportación</th>
<th>No. Recibo</th>
<th>Estatus</th>
<th>Empresa</th>
<th>Concepto</th>
<th>Periodo</th>
<th>Asesores</th>
<th>Liberado</th>
<th>Total</th>
</thead>
<tbody>
</tbody>
</table>
</div>
Y este es el codigo JavaScript que hace la peteicion a mi base de datos y el resultado lo mando al de mi tabla haciendo uso de esta linea de código: $("#table_ingresos tbody").html(data);
function listaIngresosGeneral(){
let table_lista_ingresos = document.getElementById('table_ingresos');
if(table_lista_ingresos){
$.ajax({
type: "POST",
url: "controladores/ControladorIngresos.php",
data: {action: "consultaGeneralIngresos"},
cache: false,
success: function(data){
$("#table_ingresos tbody").html(data);
}
});
$('#table_ingresos').DataTable();
}
}
Y haciendo uso de esta linea: $('#table_ingresos').DataTable(); le agrego la paginacion que me da DataTables y mi tabla se ve de esta forma:
Pero el primer problema es que apesar de que mi tabla ya tiene un me sigue mostrando 0 entradas en la tabla y si selecciono algun filtro de los titulos de mi columna mi contenido desaparece.
La peticion AJAX se carga desde un archivo PHP, este es el código donde hago la consulta y luego recorro la respuesta de mi consulta a MySQL con un foreach he imprimo los resultados con un echo:
echo "<tr class='row'>";
echo "<td><strong>".$id_ingresoM."</strong></td>";
echo "<td>".$fecha_aportacion."</td>";
echo "<td>".$no_recibo."</td>";
echo "<td>".$estatusTexto."</td>";
echo "<td><p style='font-size:13px;'><strong>".$empresaTexto."</strong></p></td>";
echo "<td>".$conceptoTexto."</td>";
echo "<td>".$periodo."</td>";
if($cadenaDistribucion != ""){
echo "<td>".$cadenaDistribucion."</td>";
}else{
echo "<td><span style='color:#d61313;'>Sin distribución</span></td>";
}
echo "<td>".$liberado."</td>";
echo "<td>"."$".number_format($total, 2)."</td>";
echo "<td>
<form action='detallesIngreso' method='POST'>
<input type='hidden' name='ingresoEdit' id='ingresoEdit' value='".$id_ingresoM."'>
<input type='submit' data-id='".$id_ingresoM."' name='btnModificar".$incremento."' id='btnModificar".$incremento."' class='positiveButtonTable' value='Ver'>
</form>
</td>";
echo "<td>
<input type='submit' onclick='eliminarRegistroIngreso(this.id);' data-id='".$id_ingresoM."' name='btnDelete".$incremento."' id='btnDelete".$incremento."' class='negativeButtonTable' value='Eliminar'>
</td>";
echo "</tr>";
El problema es que no se si es correcto mostrar los resultados en la tabla de esta manera y como puedo agregar una paginacion a la tabla.
$('#table_ingresos').DataTable();
debajo de donde asignas el HTML, con eso debería funcionar.