Foros del Web » Programando para Internet » Javascript »

Insertar filas complejas en tabla dinámicamente

Estas en el tema de Insertar filas complejas en tabla dinámicamente en el foro de Javascript en Foros del Web. Hola. Os comento la cuestión: tengo una tabla bastante grande (puede llegar a tener más de 50 columnas) y cada una de sus celdas tiene ...
  #1 (permalink)  
Antiguo 21/06/2012, 03:45
 
Fecha de Ingreso: diciembre-2011
Mensajes: 35
Antigüedad: 12 años, 4 meses
Puntos: 2
Insertar filas complejas en tabla dinámicamente

Hola.

Os comento la cuestión: tengo una tabla bastante grande (puede llegar a tener más de 50 columnas) y cada una de sus celdas tiene características bastante distintas a las demás: contienen eventos onClick, onMouseOver, algunas tienen imágenes, otras inputs...

Hasta ahora lo que hacía era pedirla por AJAX y meterla en un DIV mediante la propiedad innerHTML. Hasta ahí todo bien.


El problema ha venido cuando la tabla se ha hecho bastante grande y en algunos casos puede llegar a tener 150.000 celdas. Para solventar que se pase todo esto por AJAX cada vez y que el explorador lo tenga que mostrar, lo que estoy intentando hacer es que el servidor devuelva solamente las primeras 100 filas y que, con un botón en la parte inferior, cuando se le haga click que cargue las siguientes 100.


El problema? Que como las celdas son muy complejas desarrollarlas en JS sería muy pesado tanto en tiempo de desarrollo como de ejecución, además de hacer un código más pesado y duplicar el proceso, por lo que necesito meter como sea el HTML que devuelve el servidor.

Una aclaración: necesito que funcione en IE8 sí o sí (en Chrome le he hecho funcionar sin problemas).


He probado a:
- hacer un "innerHTML+=respuestaAjax" tanto al <table> como al <tbody>
- Crear el <tr> y meterle por innerHTML la colección de <td>'s fila por fila
- Parsear el HTML mediante loadXML y load empleando el objeto ActiveX "Microsoft.XMLDOM". En este caso la respuesta es "undefined".


Lo dicho: no me vale ir creando los <td> mediante el DOM porque es muy complejo y la tabla además tiene columnas dinámicas.



Muchas gracias por vuestro tiempo.

Dani.
  #2 (permalink)  
Antiguo 21/06/2012, 05:07
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Insertar filas complejas en tabla dinámicamente

la solución puede pasar por usar la clausa limit de mysql. de este modo puedes limitar el número de registros devuelto, así como desde que registro se empieza a devolver
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 21/06/2012, 05:36
 
Fecha de Ingreso: diciembre-2011
Mensajes: 35
Antigüedad: 12 años, 4 meses
Puntos: 2
Respuesta: Insertar filas complejas en tabla dinámicamente

Hola Isabel,

El problema no es de MySQL, sino de cuando el explorador (en este caso IE) recibe las 100 filas siguientes y tiene que meterlas en la tabla que ya existe.

De la obtención de datos no hay problema: para ello he adoptado una solución mixta SQL/NoSQL que va haciendo unset() de cada registro que se va mostrando en pantalla mientras que el resto se guarda en memoria para no repetir la consulta.
  #4 (permalink)  
Antiguo 21/06/2012, 07:57
 
Fecha de Ingreso: diciembre-2011
Mensajes: 35
Antigüedad: 12 años, 4 meses
Puntos: 2
Respuesta: Insertar filas complejas en tabla dinámicamente

Lo tengo!!!


He encontrado una solución bastante buena aquí: http://stackoverflow.com/questions/6130237/javascript-function-to-parse-html-string-into-dom
La segunda respuesta, escrita por Brad Christie.


Básicamente los pasos son los siguientes:

1. Crear un <div> oculto.
2. Enviar desde el servidor los datos de las nuevas filas con formato de tabla (incluir el <table).
3. Colocar la respuesta AJAX dentro del <div> oculto.
4. Referenciar, a partir del <div>, al <tbody> interno (.firstChild.firstChild).
5. Mover con appendChild el <tbody> a la tabla visible.


Lo he probado y va más rápido de lo que parece a priori!


Muchas gracias a todos los que le habéis dedicado tiempo :)

Etiquetas: ajax, filas, ie8, tabla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




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