Skip to main content
Aviso eliminado Mejorar los detalles por ComunidadBot
Recompensa finalizada sin una respuesta ganadora por ComunidadBot
Nueva etiqueta
Enlace
Alfa Rojo
  • 347
  • 3
  • 14
Aviso añadido Mejorar los detalles por Alfa Rojo
Recompensa iniciada por un valor de 50 de reputación por Alfa Rojo
Origen Enlace
Alfa Rojo
  • 347
  • 3
  • 14

Paginación en html

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