Me Retan: Inventar un paginador con JQuery

augusto_jaramil · #1 (**permalink**) 09/08/2019, 19:33

Buenas a tod@s de la comunidad,

Me han puesto un reto: crear un paginador a punta de JQuery+HTML

Hasta el momento tengo los siguientes codigos (scripts):

1. forma.html

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
  <head>
    <meta http-equiv="Last-Modified" content="0">
    <title>Paginador</title>
    <meta charset="UTF-8">
   <script src="jquery-3.4.1.js"></script>
   <script src="paginar.js"></script>
  </head>
 
  <body>
    <form>
      <table>
        <input type="hidden" id="pagina" name="pagina" value"" />
        <tr />
 
        <tr>
          <td><b>Sec</b></td>
          <td><b>Id</b></td>
          <td><b>Nombre</b></td>
          <td><b>Cargo</b></td>
        </tr>
 
          <?php
            for ($j=0; $j<10; $j++) {
                    $sec = $j+1;
            ?>
                    <tr>
                      <td><?php echo $sec; ?></td>
 
                      <td><input type="text" id="cod<?php echo $j; ?>" name="cod<?php echo $j; ?>" value="" size="15" /></td>
 
                      <td><input type="text" id="nombre<?php echo $j; ?>" name="nombre<?php echo $j; ?>" value="" size="60" /></td>
 
                      <td><input type="text" id="cargo<?php echo $j; ?>" name="cargo<?php echo $j; ?>" value="" size="20" /></td>
 
                           <input type="hidden" id="sec" name="sec" value="<?php echo $sec; ?>" /></td>
                    </tr>
            <?php
            }
            ?>
 
      </table>
 
      <table align='center'>
        <tr> 
           <td>
              <button onClick="Paginar('Sig');" />PaginaSiguiente
           </td>
 
           <td>
              <button onclick="Paginar('Ant');" />PaginaAnterior
           </td>
        </tr>
      </table>
    </form>
  </body>
</html>

2. paginar.js

Código Javascript:

Ver originalvar ArrayDetalle = new FormData;
 
window.onload = function () {
  $("#pagina").val(1);
}
 
function Paginar("boton") {
    if (boton == "Sig") {
           let pagina = $("#pagina").val();
           let limite = (pagina*2);
           let inicio=pagina-1;
 
           for (var i=inicio; i<limite; i++) {
                 ArrayDetalle.append("detalle["+i+"][cod]", $("#cod"+i).val());
                 ArrayDetalle.append("detalle["+i+"][nombre]", $("#nombre"+i).val());
                 ArrayDetalle.append("detalle["+i+"][cargo]", $("#cargo"+i).val());
          }
 
          var i = 0;
          for (var value of ArrayDetalle) {
                   i++;
          }
 
          for (var pair of ArrayDetalle.entries()) {
                console.log(pair[0]+ ', '+ pair[1]);
          }
 
    }
}

Hasta aquí voy.

Mi idea es la siguiente: Inicialmente, una vez se complete el formulario y al hacer click sobre el botón SiguientePagina se ejecuta la función Paginar, en ésta empiezo a poblar el ArrayDetalle. Hasta aquí voy al peluche....

AL hacer un console.log de ArrayDetalle obtengo:

Código HTML:

Ver originaldetalle[0][cod],1234
detalle[0][nombre],Pepe
detalle[0][cargo],Asistonto
detalle[1][cod],5678
detalle[1][nombre],Juancho
detalle[1][cargo],Jefe
.
.
.
etc.

Hasta acá vamos ok.

Estoy echo un lío en cómo le hago para actualizar los id de los input ya que, como se observa, utilizo un for de PHP para generar las 10 ocurrencias (lineas) para capturar los datos, por ejemplo: <td><input type="text" id="cod<?php echo $j; ?>" name="cod<?php echo $j; ?>" value="" size="15" /></td> . EL valor de $j empieza en 0 y termina en 9 para la primera página. La idea es que al pasar a la siguiente página el valor de $j empiece en 10 y termine en 11 (de acuerdo al bucle for).

Agradezco de antemano sus comentarios y observaciones al respecto.....

Mil Gracias pues