2

Tengo el siguiente código que me genera una tabla con los registros extraídos desde una base de datos, pero necesito meterle a esa misma tabla una paginación de números ya que cada día van a a ir aumentando esos registros.

He estado leyendo como poder hacerlo pero no me queda lo suficientemente claro. No sé si con una función Javascript o algo de JQuery podría quedar mejor.

¿Alguna ayuda? Gracias de antemano

echo "<div class='container'>";
          echo "<table class='table table-hover table-sm' style='margin: 0 auto; float: none;'>
                  <thead>
                  <tr>
                    <th>Usuario</th>
                    <th>Hora Inicio</th>
                    <th>Hora Inicio Pausa</th>
                    <th>Hora Fin Pausa</th>
                    <th>Hora Final</th>
                    <th>Total Horas</th>
                  </tr>
                  </thead>";

          $arrayHoras = array();

          $result = mysqli_query($link, "select pk_controlhorario, fk_usuario, hora_inicio, hora_inicio_pausa, hora_fin_pausa, hora_final from control_horario where fk_usuario = 'admin'");

          while ($fecha = $result->fetch_array()) {
              $horas = calculohoras($fecha['hora_inicio'], $fecha['hora_final']);

              $tiempoPausa = calculohoras($fecha['hora_inicio_pausa'], $fecha['hora_fin_pausa']);

              $horasTotales = calculohoras($horas,$tiempoPausa);

              $fecha2 = date('H:i',strtotime($horasTotales));

              array_push($arrayHoras, $fecha2);

              echo "<tr>
                      <td>$fecha[fk_usuario]</td>
                      <td>$fecha[hora_inicio]</td>
                      <td>$fecha[hora_inicio_pausa]</td>
                      <td>$fecha[hora_fin_pausa]</td>
                      <td>$fecha[hora_final]</td>
                      <td>$fecha2</td>
                  </tr>";
          }

          function sumarHoras($introducirArray) {
              $total = 0;
              foreach($introducirArray as $h) {
                $parts = explode(":", $h);
                $total += $parts[1]*60 + $parts[0]*3600;
              }
              return gmdate("H:i", $total);
          }

          $totalHoras = sumarHoras($arrayHoras);
          echo "<tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td><b>Total:</b></td>
                    <td>$totalHoras</td>
              </tr>";
          echo "</table>";
        echo "</div>";

1 respuesta 1

5

Con dataTables de Bootstrap lo puedes lograr. Adicionalmente te ofrece la opción de búsqueda y puedes seleccionar cuantos registros quieres que te muestre por página.

Voy a ponerte un ejemplo con datos fijos y tu solo debes reemplazar la parte del tbody con tu código de PHP.

No lo hago directamente ya que el snnipet arrojaría un error.

El ejemplo es con Bootstrap 4 pero en Bootstrap 3 también funciona.

$(document).ready(function() {
    $('#example').DataTable();
} );
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    </head>
    <body>
        <table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Usuario</th>
                <th>Hora Inicio</th>
                <th>Hora Inicio Pausa</th>
                <th>Hora Fin Pausa</th>
                <th>Hora Final</th>
                <th>Total Horas</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010/03/17</td>
                <td>$385,750</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Usuario</th>
                <th>Hora Inicio</th>
                <th>Hora Inicio Pausa</th>
                <th>Hora Fin Pausa</th>
                <th>Hora Final</th>
                <th>Total Horas</th>
            </tr>
        </tfoot>
    </table>
    </body>
</html>

7
  • El código Javascript lo coloco en un <script> en el head no?
    – Maginon
    Commented el 27 may. 2019 a las 14:47
  • Listo! Lo tengo perfecto! Muchisimas gracias!
    – Maginon
    Commented el 27 may. 2019 a las 14:56
  • ¿Sabes como podría ocultar el search?
    – Maginon
    Commented el 27 may. 2019 a las 15:06
  • 1
    Si lo quieres ocultar abre llaves como si fuera un JSON y pon lo siguiente $('#example').dataTable( { "searching": false } ); Commented el 27 may. 2019 a las 16:04
  • Hay alguna forma de poner los textos en español? Commented el 17 mar. 2020 a las 20:22

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.