14 codigos para presentar HTML Tablas en javascript

[Jaru]

pues queriendo tabular unos datos de una tabla que esta en una base de datos para verlos online, se me ocurrio buscar un sistema js de manejo de tablas

y encontre esto:

http://www.smashingmagazine.com/2007/05/30/tables-and-data-grids-with-ajax-dhtml-javascript/

una muy buena guia con alternativas para escoger y manejar tus tablas de una mejor maneras.



y la mas facil de usar fue 7. The Table Kit
(solo agregan los archivos que ahi dice, le ponen la clase a la tabla y listo )
ya la pueden drag, ordenar y borrar elementos

[vlad]

Muy apreciado tu aporte!, justo y exactamente necesito algo asi para hoy!

[g00mba]

naruto, considera no usar tablas para presentar datos hay formas más eficientes, con JS puro y CSS por ejemplo, mantener codigo html de tablas al final es muy engorroso.

ah ya vi el código, awebos, algunos de esos no usan html para las tablas.

[vlad]

naruto, considera no usar tablas para presentar datos hay formas más eficientes, con JS puro y CSS por ejemplo, mantener codigo html de tablas al final es muy engorroso.

ah ya vi el código, awebos, algunos de esos no usan html para las tablas.

No usar tablas para presentar datos?, porque?. Las tablas son para presentar datos tabulares  .

[mxgxw]

naruto, considera no usar tablas para presentar datos hay formas más eficientes, con JS puro y CSS por ejemplo, mantener codigo html de tablas al final es muy engorroso.

ah ya vi el código, awebos, algunos de esos no usan html para las tablas.

nuuuuuu lamento diferir.

Tablas para presentar datos:
[X] correcto [ ] incorrecto

Tablas para diagramar una página:
[ ] correcto [X] incorrecto

Las tablas en HTML tienen su utilidad para presentar series de datos en forma tabular. Y originalmente fueron pensadas con ese fin. ¿Porqué es que no se recomiendan las tablas a veces?. Bueno resulta que la web de hace unos años casi no tenía soporte para CSS, por lo que si querías hacer un site que mantuviera un aspecto más o menos consistente entre distintos navegadores lo que hacías era montar la estructura de la página sobre tablas.

¿El problema? Las tablas fueron diseñadas para presentar "datos" no para definir el estilo de la página, con que terminabas con una página cuyo código HTML se encargaba de definir el estilo.

Con el avance de CSS se termino recomendando no usar tablas para diagramar la página. Sin embargo en ningun momento se dijo que las tablas estaban "baneadas" del HTML. Igual tu puedes tener una tabla y modificar el estilo de la misma, cuidando siempre que tu tabla represente datos y no el estilo de como se visualizan.

[g00mba]

No usar tablas para presentar datos?, porque?. Las tablas son para presentar datos tabulares  .

si vos pero el problema es a la hora de q regresas a dar mantenimiento al código, estarás de acuerdo que leer una estructura de tablas HTML grande es cuando menos engorroso, usar un CSS para distribuir la presentación de los datos es un poco menos incómodo de leer y MUCHO mas flexible. y de hecho es una recomendación de la W3C el dejar de usar tablas para diagramar y pasarse a CSS.

mas sobre el tema:
http://www.hotdesign.com/seybold/index.html
http://articles.sitepoint.com/article/utopia-designing-tables-css
http://blogs.infosupport.com/blogs/guidol/archive/2005/06/19/494.aspx
http://www.webdeveloper.com/forum/showthread.php?t=4758

oh bueno, supongo q mgx ya lo dijo mejor q yo arriba 

[mxgxw]

si vos pero el problema es a la hora de q regresas a dar mantenimiento al código, estarás de acuerdo que leer una estructura de tablas HTML grande es cuando menos engorroso, usar un CSS para distribuir la presentación de los datos es un poco menos incómodo de leer y MUCHO mas flexible. y de hecho es una recomendación de la W3C el dejar de usar tablas para diagramar y pasarse a CSS.

mas sobre el tema:
http://www.hotdesign.com/seybold/index.html
http://articles.sitepoint.com/article/utopia-designing-tables-css
http://blogs.infosupport.com/blogs/guidol/archive/2005/06/19/494.aspx
http://www.webdeveloper.com/forum/showthread.php?t=4758

Lee mi comentario Una cosa es "diagramar" una página con tablas, y otra es usar tablas para presentar datos.

Imaginate que tenes una tabla chiquita de 500 registros. ¿Vas a hacerla a puros DIVs? Obviamente no. La recomendación de la W3C es no usar tablas para definir la estructura de la página.

Pero si vos tenes datos "tabulares" la mejor forma de hacerlo es usando la etiqueta table. Ahora, la W3C igual recomienda que cuando uses la etiqueta table procures no definir la presentación en la misma sino haciendo uso de CSS.

Ahora... usar divs y javascript para presentar tablas en HTML es querer matar moscas a cañonazos. El problema es que las tablas de html y xhtml son muy limitadas. Para HTML5 la etiqueta table va a tener mejoras respecto a la manipulación de datos, algo de lo que carecen las tablas "estaticas" actuales y que se han tenido que dinamizar haciendo uso de javascript.

[g00mba]

Lee mi comentario Una cosa es "diagramar" una página con tablas, y otra es usar tablas para presentar datos.

ahi si estamos de acuerdo.

Imaginate que tenes una tabla chiquita de 500 registros. ¿Vas a hacerla a puros DIVs? Obviamente no. La recomendación de la W3C es no usar tablas para definir la estructura de la página.

en teoria, creo q se puede verdad? ahi si me diste en que pensar  si en realidad cual de las dos es mas práctica, tenes razon en lo de diagramar y tabular datos, y q se usan tablas para eso pero naruto creo q puso esas ondas por lo de la presentación de los datos y funcionalidades añadidas, es mas con las librerias q puso yo creo q ya ni usas los tags de html para generarlas sino q usas metodos de esas librerias (si al final hacen html table o css creo q depende de cada una)

osea en lo q estoy pensando es... aunq no es "recomendado" usar css para tabular... me da la impresión que es una solucion alternativa

[Camus de Acuario]

Naruto te recomiendo este plugin:
jqGrid

demos:
Demos

tiene una buena documentacion
Wiki

Es facil de usar, solo debes tener conocimientos basicos de jQuery (tambien AJAX pero con el jQuery ya viene incluido), al ser javascript lo podes ocupar con html normal, php, jsp, asp, etc...

Yo actualmente lo ocupo con PHP trayendo datos de mysql (tambien puedes usar arvhivos xml o json, es mas si ocupas una bd los datos te los codifica como xml para mostrarlos), conectarlo con una bd es sencillo.

Para editar las celdas soporta varios tipos de input, botones, cuadros de textos, areas de texto, select, options, etc.

Ahorita estoy tratando de adaparle este modulo:
jQuery star rating
a ver si funciona

[g00mba]

uta jquery es una gran cosa!

ya explicando mejor mi duda, aunq se q lo q decis mgx es cierto, creo que es perfectamente posible hacer una tabulacion de datos con css solamente... y no veo lo inconveniente de hacerlo..? comentarios?

[Jaru]

hey gracias

que estas programando camus?

[mxgxw]

uta jquery es una gran cosa!

ya explicando mejor mi duda, aunq se q lo q decis mgx es cierto, creo que es perfectamente posible hacer una tabulacion de datos con css solamente... y no veo lo inconveniente de hacerlo..? comentarios?

Sí y no. jajajaa

Si estas haciendo una aplicación en la que necesitas un gran nivel de "dinamismo". Al estilo de que tenes que ordenar datos, filtrarlos, cambiar de posición filas, columnas, etc, etc. Obviamente el HTML por si solo no te va a funcionar, ahí es donde necesitas de AJAX y posiblemente la solución dependa más del javascript, de divs y de CSS de otra cosa. En ese caso la solución que aplicas es la de este tema. Que utiliza javascript + CSS para obtener funcionalidad no nativa de las tablas HTML.

Ahora... Si lo que vas a hacer es una "salida", por ejemplo para visualización, impresión o para reportes. Que es una información un poco más estática, entonces ahi no deberías usar AJAX, ahí si vas a tener que usar las etiquetas table. Te lo digo aquí en la oficina que parseamos muchas páginas HTML en busqueda de información. Si los datos son de forma tabular, es muchísimo más fácil leerlos si estan en una tabla que si estan regados en divs.

Un ejemplo de los grandes. En Google Docs, si elejis exportar una tabla en HTML. la salida usa etiquetas <table>:

http://spreadsheets.google.com/pub?key=pbi83QCiI73sv927U_qTWFg&output=html

Aunque dentro de google docs utilicen el gwt para el "grid" que usas para editar la misma

[g00mba]

ah vaya a eso era que queria llegar, osea mientras mas alejado de la idea convencional de página web y mas cercano a webapp sea puede que sea conveniente prescindir de las tablas completamente (un ejemplo nada mas), pero como vos decis puede ser un poco exagerado hacerlo con tanta onda si solo es una pagina sencilla.

[Camus de Acuario]

Pues asi como dice mx, a veces para presentar datos es mejor tablas porque con divs y css es cuasi imposible, aca en el trabajo ocupo jsp para generar reportes xls mediante

Código: [Seleccionar]

response.setContentType("application/vnd.ms-excel");
Y ni modo alli a la brava, por cada renglon que quiero que escriba en el xls, le tengo que mandar

Código: [Seleccionar]

out.println("<table>");
out.println(" <tr bgcolor=#FFFFFF align=center>");
if (RS1.getString(i)==null) Campo = "&nbsp;"; else Campo = RS1.getString(i);
out.println("  <td><font face=Verdana size=1 color=#000000>"+Campo+"</a></td>");
}
out.println(" </tr>");
out.println("</table>");

solo asi puedo hacer que me "respete" las celdas en excel y no me lo deje todo a lo loco

que estas programando camus?

Una mi locura, una lista tipo anime-planet o aniDB, pero aparte de poner si la estas viendo o no, que tambien controle si la tenes en dvd, cd yen cuantos numeros, formato, idioma, idioma subtitulos, fansub que la hizo, etc.

seria una fusion entre
esto: aniDB +
esto: anime-planet +
esto: myanimelist

[Jaru]

Una mi locura, una lista tipo anime-planet o aniDB, pero aparte de poner si la estas viendo o no, que tambien controle si la tenes en dvd, cd yen cuantos numeros, formato, idioma, idioma subtitulos, fansub que la hizo, etc.

seria una fusion entre
esto: aniDB +
esto: anime-planet +
esto: myanimelist

algo asi me imagine.
yo tenia una asi, para listar mis animes, pero hacia una simple tabla de forma normal
una vil tablota que hasta hacia lento el browser
hey puedo participar o al menos ver tu proyecto?