Las tablas son los elementos que más han pasado en esta transición que estamos viviendo con Internet, de ser los elemento claves para la construcción de sitios web a ser elementos destinados a mostrar contenidos tabulados de forma semántica. Ahora ya no basta con eso, se han de sobrecargar de funcionalidades para facilitar la tarea de visualizar estos datos.
Por ello nace TinyTable, una herramienta que ya hemos visto en aNieto2k y que esta última versión, la 3.0, incorpora mejoras realmente interesantes.
Entre las mejoras que nos encontramos en esta versión, nos encontramos:
- Búsqueda de datos en la tabla
- Promedios de columna y totales
- Efecto onhover
- Cambio de clases de cabecera
- Reconocimiento automático del tipo
- … más
Además de todas las funcionalidades disponibles en la versión anterior, como ordenación, paginación,… y todo en solo 7KB de nada.
var sorter = new TINY.table.sorter('sorter','table',{
headclass:'head', // Header Class //
ascclass:'asc', // Ascending Class //
descclass:'desc', // Descending Class //
evenclass:'evenrow', // Even Row Class //
oddclass:'oddrow', // Odd Row Class //
evenselclass:'evenselected', // Even Selected Column Class //
oddselclass:'oddselected', // Odd Selected Column Class //
paginate:true, // Paginate? (true or false) //
size:10, // Initial Page Size //
colddid:'columns', // Columns Dropdown ID (optional) //
currentid:'currentpage', // Current Page ID (optional) //
totalid:'totalpages', // Current Page ID (optional) //
startingrecid:'startrecord', // Starting Record ID (optional) //
endingrecid:'endrecord', // Ending Record ID (optional) //
totalrecid:'totalrecords', // Total Records ID (optional) //
hoverid:'selectedrow', // Hover Row ID (optional) //
pageddid:'pagedropdown', // Page Dropdown ID (optional) //
navid:'tablenav', // Table Navigation ID (optional) //
sortcolumn:1, // Index of Initial Column to Sort (optional) //
sortdir:1, // Sort Direction (1 or -1) //
sum:[8], // Index of Columns to Sum (optional) //
avg:[6,7,8,9], // Index of Columns to Average (optional) //
columns:[{index:7, format:'%', decimals:1},{index:8, format:'$', decimals:0}], // Sorted Column Settings (optional) //
init:true // Init Now? (true or false) //
});
Al no depender de ninguna librería JS, nos permite incorporarlo en cualquier aplicación web sin prácticamente ningún problema.
Aquí teneis un ejemplo para verlo funcionando.
11 comentarios, 2 referencias
+
#