Micaela 17 de septiembre de 2009 a las 10.29
   Imprimir artículo
elWebmaster.com

15 plugins jQuery para manejar tablas


jquery2La tabla es un objeto al que resulta dif√≠cil darle estilo, debido a la particularidad de su c√≥digo. La mayor√≠a de los dise√Īadores y desarrolladores usan div para reemplazar la tabla, ya que es mucho m√°s f√°cil darle estilo.

A√ļn as√≠, utilizamos tablas en muchas de nuestras aplicaciones diarias. En esta nota te presentamos 15 plugins jQuery √ļtiles para visualizar, ordenar, filtrar y manipular los datos en una tabla.

1. DataTables

13

DataTables es un muy potente plugin de jQuery que ofrece una gran cantidad de características. Por ejemplo, puedes tener filtrado sobre la marcha, auto-carga de datos ajax, paginación, ordenamiento de columnas, resaltado de columnas ordenadas, plug-in de apoyo, temable por CSS o jQuery UI ThemeRoller y también una documentación completa.

Haz clic aqu√≠ para ingresar al sitio de DataTables¬Ľ

2. uiTableFilter

21

uiTableFilter es un plugin de jQuery para el filtrado de filas de la tabla. El autor muestra un ejemplo detallado sobre cómo implementar la función de filtro en una tabla, junto con el plugin.

Haz clic aqu√≠ para ingresar al sitio de uiTableFilter¬Ľ

3. Scrollable HTML Table

31

Scrollable HTML Table plugin para jQuery nos permite convertir una tabla en desplazable.

Haz clic aqu√≠ para ingresar al sitio de Scrollable HTML Table¬Ľ

4. Tablesorter

42

Tablesorter es un plugin jQuery para convertir una tabla HTML estándar con etiquetas THEAD y TBODY en una tabla ordenable sin actualizaciones de página. Soporta clasificación multi-columna, navegadores cruzados y es fácilmente extensible a través de su sistema de widgets.

Haz clic aqu√≠ para ingresar al sitio de Tablesorter¬Ľ

5. Flexigrid

52

Flexigrid es un formulario Javascript Web 2.0 liviano para jQuery. Tiene un mont√≥n de funciones interesantes como la tematizaci√≥n, la paginaci√≥n, barra de herramientas de b√ļsqueda, ordenamiento, carga de datos fuente ajax, las columnas de tama√Īo variable, la altura y el ancho.

Haz clic aqu√≠ para ingresar al sitio de Flexigrid¬Ľ

6. HeatColor

61

HeatColor es un plugin que te permite asignar colores a los elementos, sobre la base de un valor derivado de ese elemento. El valor obtenido se compara con un rango de valores, ya sea de forma autom√°tica o pasados, y al elemento se le asigna un color de “calor” basado en la posici√≥n de su valor derivado dentro de la gama.

Haz clic aqu√≠ para ingresar al sitio de HeatColor¬Ľ

7. JQTreeTable

71

Con JQTreeTable, puedes tener una vista de árbol en la tabla. Con este plugin, los usuarios todavía obtienen la tabla plana, aunque hayan desactivado el JavaScript.

Haz clic aqu√≠ para ingresar al sitio de JQTreeTable¬Ľ

8. Ingrid

81

Ingrid es otro plugin jQuery Datagrid. Tiene caracter√≠sticas como cambiar el tama√Īo de la columna, la paginaci√≥n, la clasificaci√≥n, el estilamiento de filas y columnas y m√°s. El sitio web del autor presenta mucha documentaci√≥n sobre c√≥mo empezar con este plugin.

Haz clic aqu√≠ para ingresar al sitio de Ingrid¬Ľ

9. jQuery ColumnManager plugin

91

columnManager es un plugin de jQuery que puede cambiar la visibilidad de las columnas de la tabla (el colapso y la ampliaci√≥n de las mismas) y guardar el estado hasta la pr√≥xima visita. Este es un plugin muy peque√Īo y ligero que s√≥lo pesa 3.6KB.

Haz clic aqu√≠ para ingresar al sitio de jQuery Column Manager plugin¬Ľ

10. jQuery treeTable

101

jQuery treeTable es similar a JQTreeTable, que es capaz de mostrar un árbol en una tabla. Este plugin conserva los documentos HTML limpios y se degradará muy bien cuando el Javascript esté desactivado en el navegador.

Haz clic aqu√≠ para ingresar al sitio de jQuery treeTable¬Ľ

11. CSV2Table

111

CSV2Table cargar√° un archivo CSV y crear√° una tabla con contenidos de este archivo CSV.

Haz clic aqu√≠ para ingresar al sitio de CSV2Table¬Ľ

12. Table Pagination

121

Este plugin jQuery se utiliza para crear un elemento de paginación bajo en elemento de tabla. Puedes personalizar las necesidades de paginación en base a varias propiedades.

Haz clic aqu√≠ para ingresar al sitio de Table Pagination¬Ľ

13. jQuery TableRowCheckboxToggle

13

Este plugin puede agregar la opción de alternar a las filas que se pueden especificar a través de los nombres de clase CSS.

Haz clic aqu√≠ para ingresar al sitio de jQuery TableRowCheckboxToggle¬Ľ

14. Table Drag and Drop jQuery plugin

Este simple plugin permite al usuario reordenar las filas de una tabla usando drag y drop. Las filas individuales pueden ser marcadas como no arrastrable y / o no soltables.

Haz clic aqu√≠ para ingresar al sitio de Table Drag and Drop jQuery plugin¬Ľ

15. uiTableEdit

uiTableEdit es otro plugin jQuery genial de Greg Weber, el autor de uiTableFilter. uiTableEdit har√° que las tablas sean editables por el usuario.

Haz clic aqu√≠ para ingresar al sitio de uiTableEdit¬Ľ

Fuente: Web Design Booth


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (12)

  1. Carlos Cuesta I. dice:

    Excelente aporte.

    Gracias

  2. luis dice:

    buena, excelente

  3. Jeny dice:

    Excelente! Muchas gracias!!

  4. Fernando dice:

    Muchisimas gracias..:D revisando enlaces..::D

  5. Ivan dice:

    Esto me parece una copia de este post http://www.webdesignbooth.com/15-great-jquery-plugins-for-better-table-manipulation/

  6. Morton dice:

    @Ivan: Se trata de una traducción realizada por nosotros, de la fuente que está citada al pie del artículo.

  7. juan alberto patal dice:

    Interesante aporte! ¬ŅAlguien sabe si hay que pagar por estos plug-ins?

    Saludos!

  8. luis | carros en venta dice:

    Excelente plugin. Lo voy a probar tomando los datos de una base de datos mysql y php.
    Gracias por el aporte

  9. Alvaro dice:

    Hola :-) Hace unos días publique un plugin para jQuery que permite redimensionar las columnas de manera sencilla. También podría incluirse en este artículo para todos los que estén interesados, la url es http://quocity.com/colresizable/spanish.html

    Saludos!

  10. Hippomegas web hosting dice:

    Al parecer este post es viejo ya, en la actualidad hay varias opciones para crear tablas con presentación moderna. Ojalá pudieran actualizarlo con nueva información. Saludos.

  11. Armando Falcon dice:

    alguien sabe si se pueden utilizar dos plugin en una misma tabla

    saludos y muy buena pagina

  12. Dante dice:

    gracias…. Alguien sabr√° como tomar los datos de la BD ( base de datos) colocarlos en la tabla ( los registros ) por filas … ( hasta ac√° se como se hace) la pregunta: realizar c√°lculos con los campos de las columnas por filas y que uno de los campos se edite ( por ejemplo campo porcentaje % ) que al cambiarle el valor se recalcule y modifique a un campo resultado en la misma fija ( por ejemplo campo total) , y que eso se pueda realizar independientemente a todas las filas de la tabla y que al final de la tabla se tenga la sumatoria Global del campo de la columna que llamamos total …. muchas gracias si alguien me puede ayudar con esto con informacion de un link de alguna libreria etc… muchas gracias mi correo es : dantelimongi@yahoo.com

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder