jQuery, Arrays dinámicos y envíos por PHP

Posted on 19 julio, 2014

jQuery, arrays dinámicos y PHP

Para aquellos que han utilizado anteriormente jQuery, ya saben las grandes ventajas que esta librería tiene por sobre javascript simple, no solo puedes hacer mucho más escribiendo menos, si no que además trae una serie de mejoras tanto en efectos, toma de datos y el mismo manejo de los arrays. Por esas mismas razones es probablemente la librería de javascript más popular actualmente, y la que yo personalmente más utilizo, y consta con una increíble cantidad de documentación, no solo en su sitio oficial “http://api.jquery.com/“.

 

Bien pues, hace unos días dentro de una de las aplicaciones que tuve que crear en mi trabajo había esta pequeña funcionalidad donde tenía que generar una tabla en html con varias columnas con información pero con una X cantidad de filas, y necesitaba recorrer esta tabla para generar un array multidinamico para poder capturar y almacenar toda esta información, así que decidí compartir una pequeña parte del código especificamente la función en jQuery que recibe el id de la tabla y busca fila por fila la información que necesita y la almacena en un array de jQuery para finalmente enviarla a PHP por medio de ajax.

la tabla para este ejemplo será bastante simple, esta tabla se genera en otro lugar por lo que yo no tengo mayor control sobre ella, solo tengo que obtener los resultados que se encuentran allí, esta tabla se utiliza para listar una X cantidad de datos que pueden ser editados, por eso es tan importante recoger cada fila y clasificarla de forma independiente, para así poder actualizar cada registro de forma exitosa.

tabla_jquery

Imagen Tabla original

Es una tabla en HTML sin mayor ciencia, quizás denotar el hecho de que por ejemplo cada fila TR tiene su propio id, que corresponde al ID del registro que está mostrando, esto lo usaré eventualmente para rescatar y catalogar cada dato con jQuery.

Ahora el botón para registrar todos estos datos, en el ejemplo y en la aplicación original hay 2 formas de grabar los datos una actualización individual, con los botones al final de cada fila o una masiva que voy a mostrar ahora, la individual a decir verdad no tiene mucha ciencia por lo que no la mencionaré mas durante este ejemplo.

La idea principal de esta botón era ejecutar una función a la cual como parámetro se le paso el ID de la tabla que hay que recorrer, esto se hizo con la idea de tener muchas tablas con el mismo formato pero diferentes ID y contenidos para usar siempre la misma función jQuery para tomar la info y almacenarla.

Finalmente llegamos a la función jQuery que voy a crear para poder recorrer los datos dentro de la tabla HTML y guardarlos en un ARRAY de jQuery.

Muy bien, una vez hecho esto la parte “dificil” está hecha, lo que hacemos primero es declarar nuestras 2 variables principales, una es el ARRAY en jQuery que usaremos para almacenar todos nuestros otros Arrays con información y la otra es el objeto TABLA, una vez que creamos el objeto tabla podemos acceder a casi cualquier información procedente de este de forma relativamente fácil.

Una vez creadas estas variables lo que hacemos es usando el método .each() de jQuery para recorrer cada fila o TR y por cada una de estás no solo obtener los datos sino almaceneralos en un Array y este guardarlo en el Array que ya tenemos guardado.

Una ves hecho esto tenemos un array, con el resto de la info dentro si miramos el console.log (y si tenemos firebug instalado) podremos ver algo así:

Nuevamente crear este array en jQuery no toma mucho tiempo y es bastante simple, luego es cosa de jugar con los elementos que necesitas dentro de la tabla, en este caso yo necesitaba solo esos 3, pero podrían ser más como podrían ser mucho más complejos, pero con jQuery es bastante más simple tomar y manejar estos datos tal como se ve arriba.

Como ya vimos la creación de estos datos en jQuery y sabemos como manejarlos y tratarlos haré un pequeño ejemplo de lo que se puede hacer y como por ejemplo crear las queries necesarias para pasar del array de jQuery, a PHP y finalmente ejecutar un update en la base de datos por cada uno de estos registros.

Como se ve no tiene mayor ciencia, pero en unas pocas lineas de jQuery se crea todo el array necesario para trabajar los datos variables de la tabla, que podría haber tomado una enorme cantidad de lineas para construir.

Puntos a Recordar

 

solo como extras cabe recordar que para poder ejecutar códigos de jQuery y en especial para poder utilizar todo lo que esta gran librería tiene para ofrecer primero tenemos que adjuntarla a nuestros html, ya sea de forma local descargando la versión de jQuery que necesitemos ya sea desde el sitio oficial

Sígueme!

Enzopiero Valdivia O.

Desarrollador Web at Pandamonios
Desarrollador web de profesión, Amante de la fotografía y los videojuegos, actualmente trabajando como desarrollador en PHP. trato de escribir de tecnología, fotografía y otros teman que me interesan.
  • PS3: Eddie--MW
  • Origin: Edd1eMW
  • Steam: EddieMW
Sígueme!

Descargas del Post