0

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.

6
  • Datatable , sería la respuesta. el 16 nov. 2018 a las 14:58
  • muchas gracias!! parece ser lo que busco, comenzare a leer la documentacion
    – userNNNN
    el 16 nov. 2018 a las 15:04
  • 1
    El código compartido puede potencialmente ser vulnerable a ataques de inyección SQL. Deberías evitar las consultas dinámicas (creadas concatenando cadenas) y usar consultas preparadas en su lugar.
    – Alvaro Montoro
    el 16 nov. 2018 a las 15:21
  • Hola @AlvaroMontoro, como podria darle mas seguridad a mi código para evitar ese tipo de ataque? realizando la consulta en otro php ? o dandole una validacion los campos que recibo por metodo POST antes de hacer la consulta?, muchas gracias por la observación
    – userNNNN
    el 16 nov. 2018 a las 15:50
  • Como parece que usas MySQLi, podrías usar prepare para preparar sentencias para su ejecución, bind_param para asociar los parámetros de manera segura. Puedes obtener más información en la documentación de PHP.
    – Alvaro Montoro
    el 16 nov. 2018 a las 15:55

1 respuesta 1

1

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>
4
  • Muchas gracias!! me sirvió mucho sobre todo la traducción, disculpa, y si quisiera quitar el input de buscar? (Debido a que tengo un formulario personalizado que hace esa búsqueda)
    – userNNNN
    el 16 nov. 2018 a las 15:55
  • Por si las dudas fijate ese buscador busca sobre la tabla creada, si vos haces un filtro que crea los datos de la tabla dsp ese filtro busca sobre esa tabla,supongamos que buscas gente que cumpla años de enero a abril, te trae todos los nombres, ese mini filtro te podria servir para buscar todos los que se llamen Juan por ejemplo, no vuelve a regenerar la tabla, solo busca en la tabla creada la palabra que vos quieras. Ahora cuando me libere te busco como era sacarlo, si queres podes ir viendo la documentacion de datatable algun ejemplo q no tenga buscador y eso lo sacas del script que te pase
    – Juan
    el 16 nov. 2018 a las 15:59
  • No encuentro al ejemplo pero fijate que el id del filtro que se crea es mytable_filter proba si podes hacer un remove() de ese item con jquery al momento que se crea la tabla
    – Juan
    el 16 nov. 2018 a las 16:13
  • Genial! lo probaré, aunque en base a tu explicación anterior, quizás si sea necesario tener un buscador ajax adicional a mi primer filtro, muchas gracias!!
    – userNNNN
    el 16 nov. 2018 a las 16:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.