Ordenar columnas de una tabla con Javascript y TinyTable

rdenar columnas de una tabla con Javascript y TinyTable

TinyTable es una librería con el fin de ordenar columnas de una tabla, esta funcionalidad la realiza con JavaScript, sin peticiones al Servidor de Base de Datos.

Esta librería no solo tiene la opción para ordenar, también nos permite: Paginar, customizar el numero de filas por pagina, buscar por contenido en la tabla, entre otras cosas.

Estos son los pasos para implementar TinyTable en nuestra aplicación web.

Previamente hemos tenido que descargar el script, descomprimirlo y solo copiar a otra carpeta para la demo los archivos script.js, style.css y la carpeta “images”.

Paso 1: Crear nuestro HTML.

En este paso generaremos un archivo .html e incluiremos los archivos script.js y style.css.



  


    
    
    


Paso 2: Crear la estructura de la grilla.

Esta estructura se reemplazara en el .html en lugar de .

ID

Name

Phone

Email

Birthdate

Last Access

Rating

Done

Salary

Score

1 Ezekiel Hart (627) 536-4760 tortor@est.ca 12/02/1962 March 26, 2009 -7 7% $73,229 6.9
2 Jaquelyn Pace (921) 943-5780 in@elementum.org 06/03/1957 October 20, 2006 -7 33% $130,752 4.9

Paso 3: inicializar el ordenamiento.

Lo colocaremos dentro de la estructura html en reemplazo del tag .

var sorter = new TINY.table.sorter('sorter','table',{
    headclass:'head',  // clase de la cabecera
    ascclass:'asc',    // clase para orden ascendente
    descclass:'desc',  // clase para orden descendente
    evenclass:'evenrow', // clase de filas 1
    oddclass:'oddrow',   // clase de filas 2
    evenselclass:'evenselected',// clase de filas seleccionadas 1
    oddselclass:'oddselected',// clase de filas seleccionadas 2
    paginate:true, // paginacion (true or false)
    size:10, // filas por pagina
    colddid:'columns', // dropdown de columnas para buscar
    currentid:'currentpage', // mostrar pagina actual
    totalid:'totalpages', // mostrar total de paginas
    startingrecid:'startrecord', // numero de registro inicio
    endingrecid:'endrecord', // numero de registro final
    totalrecid:'totalrecords', // total de registros
    pageddid:'pagedropdown', // dropdown de paginado
    navid:'tablenav', // ID de elemento de navegacion
    sortcolumn:1, // columna inicial a ordenar
    sortdir:1, // direccion de orden 1 o -1
    sum:[8], // columnas que se sumaran
    avg:[6,7,8,9], // columnas que se promediaran
    columns:[
        {index:7, format:'%', decimals:1},
        {index:8, format:'$', decimals:0}],
    // opciones adicionales de columnas
    init:true // Iniciar ahora? true o false
});

Hemos dado un vistazo de como implementar TinyTable de manera básica, solo con el ordenamiento, pero podríamos agregar elementos html con sus respectivos identificadores para agregar funciones de búsqueda, paginado y demás opciones de manera automática que nos provee esta increíble librería.

Ver DemoDescargar

zp8497586rq

jfdghjhthit45

También te puede interesar

3 Comments

  1. uberVU - social comments
    feb 12, 2010 @ 22:21:39

    Social comments and analytics for this post…

    This post was mentioned on Twitter by ajaxplugins: RT @craftyman: Ordenar columnas de una tabla con #javascript y TinyTable #cman – http://bit.ly/7u59is

  2. Francisco Nuñez
    mar 08, 2011 @ 09:32:18

    Muy buen ejemplo

  3. Jose
    dic 12, 2011 @ 14:00:13

    No me aparece para ordenar por columna.
    Que puede estar fallando.

    Desde ya muchas gracias