Dividir tabla HTML

publicado por: Anonymous

Hola tengo el siguiente codigo:

     <div style="overflow-x:auto;">
    <table class="table table-responsive">
        <thead class="thead-dark">
            <tr>
                <th>Nro</th>
                <th>Fecha</th>
                <th>Hora</th>
                <th>Duración</th>
            </tr> 
        </thead>
        <tbody><?php
                $consulta="SELECT * FROM 'llamadas' WHERE $condicionales LIMIT 500";
                $respuesta=$conexion->query($consulta);
                $cont=1;
                while ($columna=mysqli_fetch_array($respuesta,MYSQL_ASSOC))
                {
                echo "<tr><td>".$columna['nro']."</td><tr><td>".$columna['fecha']."</td><tr><td>".$columna['hora']."</td><tr><td>".$columna['duracion']."</td></tr>";
                 }
               ?>
        </tbody>
    </table>
</div>

Pero como verán, mi consulta bota muchos resultados para ser mostrados en una sola vista, quisiera saber cómo podría separar los datos para quizás solo mostrar 20 datos y que apareciera un botón en la parte superior para poder avanzar o retroceder a la siguiente lista de datos.

solución

Podes usar https://datatables.net/.

Descargas el archivo y tenes que tener Jquery tambien:
https://jquery.com/

Tu tabla tendria que tener este id:

id="mytable"

Y luego creas un script que tenga lo siguiente y listo ya tenes armada la tabla con toda la información, filtros, exportar y paginación:
Esta configuración ya te arma todo traducido al español.

 $('#mytable').DataTable(
              {
                responsive: false,
                dom: 'B<"clear">lfrtip',
                fixedColumns: true,
                fixedHeader: true,
                scrollCollapse: true,
                bSort: true,
                autoWidth: true,
                scrollCollapse: true,
                lengthMenu: [[5,25, 50, -1], [5,25, 50, "All"]],
                info: true,
                buttons: [
                  {
                    extend: 'excelHtml5',
                    title: dato,
                    className: 'btn',
                    text: "Excel",
                    exportOptions: {
                      columns: ":not(.no-exportar)"
                    }
                },
                {
                  extend: 'csvHtml5',
                  title: dato,
                  className: 'btn',
                  text: "Csv",
                  exportOptions: {
                    columns: ":not(.no-exportar)"
                  }
              },
                  {
                    extend: 'pdfHtml5',
                    title: dato,
                    className: 'btn',
                    text: "Pdf",
                    exportOptions: {
                      columns: ":not(.no-exportar)"
                    },
                     customize: function ( doc ) {
                              doc.content.splice( 1, 0, {
                                  margin: [ 0, 0, 0, 12 ],
                                  alignment: 'center',
                                  image: ''
                              } );
                          }
                  },
              {
                extend: 'print',
                title: dato,
                className: 'btn',
                text: "Imprimir",
                exportOptions: {
                  columns: ":not(.no-exportar)"
                }
            },
            {
              extend: 'copy',
              title: dato,
              className: 'btn',
              text: "Copiar",
              exportOptions: {
                columns: ":not(.no-exportar)"
              }
            }
              ],
                language: {
                          "sProcessing":     "Procesando...",
                          "sLengthMenu":     "Mostrar _MENU_ registros",
                          "sZeroRecords":    "No se encontraron resultados",
                          "sEmptyTable":     "Ningún dato disponible en esta tabla",
                          "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                          "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
                          "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
                          "sInfoPostFix":    "",
                          "sSearch":         "Buscar:",
                          "sUrl":            "",
                          "sInfoThousands":  ",",
                          "sLoadingRecords": "Cargando...",
                          "oPaginate": {
                                        "sFirst":    "Primero",
                                        "sLast":     "Último",
                                        "sNext":     "Siguiente",
                                        "sPrevious": "Anterior"
                                      },
                          "oAria":    {
                                      "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                                      "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                                      },
                          "decimal": ",",
                          "thousands": "."
                        }
              });
          });

Quedaria asi (Los botones eliminar y modificar no, son funciones que puse yo)

introducir la descripción de la imagen aquí

La tabla tiene que tener este formato:

        <table id="mytable">
            <thead>
                <tr>
                        <td>Nombre de tu campo</td>
                        <td>Nombre de tu campo</td>
                        <td>Nombre de tu campo</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                        <td>Valor de tu campo</td>
                        <td>Valor de tu campo</td>
                        <td>Valor de tu campo</td>
                </tr>
            </tbody>
            <tfoot>
                    <tr>
                        <td>Nombre de tu campo</td>
                        <td>Nombre de tu campo</td>
                        <td>Nombre de tu campo</td>
                    </tr>
                </tfoot>
        </table>
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *