aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Los elementos <table />, poco a poco, se están usando para lo que fueron creados, como la mejor forma de mostrar datos tabulados al usuario. Gracias a este uso, es posible usar javascript para añadirle funcionalidad a esas estáticas tablas.

(Ver Imagen)

Entre estos 15 plugins jQuery, seguro que encuentras algo para hacer que tus tablas de datos no sean planas y sin opciones.

DataTables

Permite:

• Edición al vuelo
• Carga de datos con Ajax
• Paginación
• Multiordenación por columnas
• Extensible por plugins
• Personalizable por CSS
• Idiomatizable

uiTableFilter

Permite:

• Filtrar datos al vuelo

Scrollable HTML Table

Permite:

• Usar la estructura HTML
• Limitar el alto y ancho de la tabla

Tablesorter

Permite:

• Multiordenación por columnas
• Extensible mediante widgets

Flexigrid

Permite:

• Re-dimensionar las columnas
• Re-dimensionar la tabla
• Ordenación por columnas
• Carga de datos mediante Ajax
• Paginación
• Mostrar u Ocultar columnas
• Toolbar inferior con opciones
• Busqueda de datos
• API accesible

HeatColor

Permite:

• Establecer rango de colores para visualizar más fácilmente resultados.

JQTreeTable

Permite:

• Mostrar datos en forma de arbol dentro de tu tabla.

Ingrid

Permite:

• Re-dimensionar columnas
• Paginación
• Ordenación por columna o fila
• Personalización mediante CSS

jQuery ColumnManager plugin

Permite:

• Mostrar u ocultar columnas.

jQuery treeTable

Permite:

• Mostrar datos en forma de árbol.

CSV2Table

Permite:

• Cargar datos de un fichero CSV

Table Pagination

Permite:

• Paginación

jQuery TableRowCheckboxToggle

Permite:

• Cambiar la class de la fila mediante checkboxes (para remarcarlas)

Table Drag and Drop jQuery plugin

Permite:

• Hacer Drag and Drop en filas reordenandolas.

uiTableEdit

Permite:

• Permite editar la tabla por el usuario

jQuery Visualize, es un plugin de jQuery que nos permite generar gráficas dinámicas usando <canvas /> para alogar los gráficos.

(Ver Imagen)

Usando los datos alojados en tablas el resultado no puede ser más accesible, ya que en caso de que el usuario no tenga el Javascript activo, este podrá ver la tabla con los datos. Posibilitando así su comprensión.

¿Como funciona?

<table>
	<caption>2009 Individual Sales by Category</caption>
	<thead>
		<tr>
			<td></td>
			<th>food</th>
			<th>auto</th>
			<th>household</th>
			<th>furniture</th>
			<th>kitchen</th>
			<th>bath</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Mary</th>
			<td>150</td>
			<td>160</td>
			<td>40</td>
			<td>120</td>
			<td>30</td>
			<td>70</td>
		</tr>
		<tr>
			<th>Tom</th>
			<td>3</td>
			<td>40</td>
			<td>30</td>
			<td>45</td>
			<td>35</td>
			<td>49</td>
		</tr>
		...repetitive rows removed for brevity.	
	</tbody>
</table>

Usando una estructura de tabla normal, almacenamos los datos en ella y posteriormente el plugin los usará para generar el gráfico con estos valores.

$('table').visualize({options});

Opciones

• type: string. Valors aceptados ‘bar’, ‘area’, ‘pie’, ‘line’. Default: ‘bar’.
• width: number. Ancho de la gráfica. Por defecto el tamaño de la tabla.
• height: number. Altura de la gráfica. Por defecto el tamaño de la tabla.
• appendTitle: boolean. Añadir título a la gráfica. Default: true.
• title: string. Título de la gráfica. Por defecto se usa el <caption /> de la tabla.
• appendKey: boolean. Añadir color principal. Default: true.
• colors: array. Array de colores usados. Default: [‘#be1e2d’,’#666699′,’#92d5ea’,’#ee8310′,’#8d10ee’,’#5a3b16′,’#26a4ed’,’#f45a90′,’#e9e744′]
• textColors: array. Array de colores para el texto. Default: [].
• parseDirection: string. Dirección de parseo de datos de la tabla Acepta ‘x’ e ‘y’. Default: ‘x’.
• pieMargin: number.Espacio alrededor de la gráfica tipo «Pie». Default: 20.
• pieLabelPos: string. Posición del texto de etiqueta en la gráfica tipo «Pie». Acepta ‘inside’ y ‘outside’. Default: ‘inside’.
• lineWeight: number. Tamaño de la línea de la gráfica. Default: 4.
• barGroupMargin: number. Espacio entre barras. Default: 10.
• barMargin: number.Margenes de la gráfica. Default: 1

Podeis ver una gráfica dinámica y descargar el plugin directamente desde este enlace.

El otro día vimos Sexy Forms, un plugin para MooTools que nos permitía mejorar estéticamente los formularios de nuestras aplicaciones. jqTransform, es un plugin de jQuery que consigue más o menos lo mismo.

(Ver Imagen)

Implementación

Como todos los plugins de los diferentes frameworks, la implementación es realmente sencilla.

Añadimos los ficheros Javascript necesarios

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>

Escribimos nuestro formulario

<form class="jqtransform">
  <div class="rowElem">
    <label for="name">Name: </label>
    <input type="text" name="name" />
  </div>
  <div class="rowElem"><input type="submit" value="send" /><div>
</form>

Indicamos el formulario anterior debe ser más elegante 😀

<script type="text/javascript">
$(function() {
    $("form.jqtransform").jqTransform();
});
</script>

Descargar

Puedes descargarlo directamente desde aquí.

James Padolsey, ha creado un interesante bookmarlet que nos permite conocer los plugins jQuery que se están usando una página.

(Ver Imagen)

Instalación

Simplemente tendremos que guardar este enlace en nuestros marcadores y ejecutarlo cuando queramos conocer que plugins usa esa página que siempre nos ha fascinado.