Foros del Web » Programando para Internet » Jquery »

Me Retan: Inventar un paginador con JQuery

Estas en el tema de Me Retan: Inventar un paginador con JQuery en el foro de Jquery en Foros del Web. Buenas a [email protected] de la comunidad, Me han puesto un reto: crear un paginador a punta de JQuery+HTML Hasta el momento tengo los siguientes codigos ...
  #1 (permalink)  
Antiguo 09/08/2019, 19:33
 
Fecha de Ingreso: junio-2004
Ubicación: Ciudad de Panama
Mensajes: 534
Antigüedad: 15 años, 1 mes
Puntos: 7
Me Retan: Inventar un paginador con JQuery

Buenas a [email protected] 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
  1. <!DOCTYPE html>
  2. <html lang="es">
  3.   <head>
  4.     <meta http-equiv="Last-Modified" content="0">
  5.     <title>Paginador</title>
  6.     <meta charset="UTF-8">
  7.    <script src="jquery-3.4.1.js"></script>
  8.    <script src="paginar.js"></script>
  9.   </head>
  10.  
  11.   <body>
  12.     <form>
  13.       <table>
  14.         <input type="hidden" id="pagina" name="pagina" value"" />
  15.         <tr />
  16.  
  17.         <tr>
  18.           <td><b>Sec</b></td>
  19.           <td><b>Id</b></td>
  20.           <td><b>Nombre</b></td>
  21.           <td><b>Cargo</b></td>
  22.         </tr>
  23.  
  24.           <?php
  25.             for ($j=0; $j<10; $j++) {
  26.                    $sec = $j+1;
  27.             ?>
  28.                     <tr>
  29.                       <td><?php echo $sec; ?></td>
  30.  
  31.                       <td><input type="text" id="cod<?php echo $j; ?>" name="cod<?php echo $j; ?>" value="" size="15" /></td>
  32.  
  33.                       <td><input type="text" id="nombre<?php echo $j; ?>" name="nombre<?php echo $j; ?>" value="" size="60" /></td>
  34.  
  35.                       <td><input type="text" id="cargo<?php echo $j; ?>" name="cargo<?php echo $j; ?>" value="" size="20" /></td>
  36.  
  37.                            <input type="hidden" id="sec" name="sec" value="<?php echo $sec; ?>" /></td>
  38.                     </tr>
  39.             <?php
  40.             }
  41.             ?>
  42.  
  43.       </table>
  44.  
  45.       <table align='center'>
  46.         <tr>
  47.            <td>
  48.               <button onClick="Paginar('Sig');" />PaginaSiguiente
  49.            </td>
  50.  
  51.            <td>
  52.               <button onclick="Paginar('Ant');" />PaginaAnterior
  53.            </td>
  54.         </tr>
  55.       </table>
  56.     </form>
  57.   </body>
  58. </html>

2. paginar.js

Código Javascript:
Ver original
  1. var ArrayDetalle = new FormData;
  2.  
  3. window.onload = function () {
  4.   $("#pagina").val(1);
  5. }
  6.  
  7. function Paginar("boton") {
  8.     if (boton == "Sig") {
  9.            let pagina = $("#pagina").val();
  10.            let limite = (pagina*2);
  11.            let inicio=pagina-1;
  12.  
  13.            for (var i=inicio; i<limite; i++) {
  14.                  ArrayDetalle.append("detalle["+i+"][cod]", $("#cod"+i).val());
  15.                  ArrayDetalle.append("detalle["+i+"][nombre]", $("#nombre"+i).val());
  16.                  ArrayDetalle.append("detalle["+i+"][cargo]", $("#cargo"+i).val());
  17.           }
  18.  
  19.           var i = 0;
  20.           for (var value of ArrayDetalle) {
  21.                    i++;
  22.           }
  23.  
  24.           for (var pair of ArrayDetalle.entries()) {
  25.                 console.log(pair[0]+ ', '+ pair[1]);
  26.           }
  27.  
  28.     }
  29. }

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 original
  1. detalle[0][cod],1234
  2. detalle[0][nombre],Pepe
  3. detalle[0][cargo],Asistonto
  4. detalle[1][cod],5678
  5. detalle[1][nombre],Juancho
  6. detalle[1][cargo],Jefe
  7. .
  8. .
  9. .
  10. 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
__________________
El que no sabe y sabe que no sabe, es un ignorante...enseñémosle!. El que no sabe y se cree que sabe, es un necio... ¡ignorémosle!.
El que sabe y sabe que sabe, es un sabio... ¡sigámosle!.



La zona horaria es GMT -6. Ahora son las 00:18.