Split HTML table

Question

Split HTML table

Navigation

#1 by (1 votes)

0

Hello, I have the following code:

     <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>

But as you can see, my query throws many results to be shown in a single view, I would like to know how I could separate the data to perhaps only show 20 data and that a button appears at the top to be able to advance or go back to the next one list of data.

html php

asked by userNNNN 16.11.2018 в 15:51

source

1 answer

how to receive data in PHP sent from AJAX in wordpress Make field month filter date ("Y-m-d")

score 1 · Accepted Answer

You can use link .

Download the file and you have to have Jquery too: link

Your table should have this id:

id="mytable"

And then you create a script that has the following and you're ready and you have armed the table with all the information, filters, export and pagination: This configuration already puts everything together in Spanish.

 $('#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": "."
                        }
              });
          });

It would stay like this (The delete and modify buttons are not, they are functions that I put)

The table must have this format:

        <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>