Estoy obteniendo unos valores desde una lambda de AWS, esta trae información que la modelo a cierto gusto dependiendo de la tabla, todo funciona correcto. Pero hay veces que puede devolver hasta +30,000 elementos y es demasiada carga para la página, por lo que estoy haciendo la paginación de esta tabla.
Actualmente no conozco nada de jquery, sin embargo, me guie por un mini tutorial simple en el cual, lo único que no copio, es la tabla, ya que esta la tengo ya implementada y es dinámica.
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.0/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.dataTables.min.css"/>
<body>
<table border="1" id="example" class="display" style="width:100%"> <!-- class="data-table" -->
<thead>
<tr >
<th *ngFor="let header of tableHeaders" text-center><b>
{{ header.replace("_"," ").replace("_"," ") }} <!-- headers es una variable en mi clase .ts -->
</b></th>
</tr>
</thead>
<tbody>
<ng-container *ngIf="!searching">
<tr *ngFor="let row of transactions">
<td *ngFor="let value of row"> <!-- Tambien busco como hacer dinamica esta parte -->
{{ value.Network }}
{{ value.Err_Code }}
{{ value.User }}
{{ value["UUID_Transactions"] }}
{{ value.DateDeposit }}
</td>
</tr>
</ng-container>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
} );
} );
</script>
</body>
Y el resultado, simplemente no genera los índices para moverme entre paginas, sin mencionar, que tampoco agrupa nada. Simplemente, no me funciona y toda la información que he encontrado, usan jquery o boostrap, pero ninguno me funciona como muestran que funciona.
P.D. Estoy usando ionic, pero la tabla la tengo con html, espero no afecte mi pregunta
Ionic
puedes considerarinfinite scroll
olazy loading
. Acá hay un minitutorial en el que muestran cómo implementarlo.