Ordenar columnas de una tabla con Javascript y TinyTable

Más ...

Posteado el: 23/11/2009 por: Craftyman

Tags: CSS, Ordenar tabla javascript, TinyTable

Ordenar 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.

<html>
<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
    <!-- contenido -->
    <script type="text/javascript" src="script.js"></script>
    <!-- js -->
</body>
</html>

Paso 2: Crear la estructura de la grilla.

Esta estructura se reemplazara en el .html en lugar de <!– contenido –>.

<table id="table" class="tinytable">
    <thead>
        <tr>
            <th class="nosort"><h3>ID</h3></th>
            <th><h3>Name</h3></th>
            <th><h3>Phone</h3></th>
            <th><h3>Email</h3></th>
            <th><h3>Birthdate</h3></th>
            <th><h3>Last Access</h3></th>
            <th><h3>Rating</h3></th>
            <th><h3>Done</h3></th>
            <th><h3>Salary</h3></th>
            <th><h3>Score</h3></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Ezekiel Hart</td>
            <td>(627) 536-4760</td>
            <td><a href="mailto:#">tortor@est.ca</a></td>
            <td>12/02/1962</td>
            <td>March 26, 2009</td>
            <td>-7</td>
            <td>7%</td>
            <td>$73,229</td>
            <td>6.9</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jaquelyn Pace</td>
            <td>(921) 943-5780</td>
            <td><a href="mailto:#">in@elementum.org</a></td>
            <td>06/03/1957</td>
            <td>October 20, 2006</td>
            <td>-7</td>
            <td>33%</td>
            <td>$130,752</td>
            <td>4.9</td>
        </tr>
        <!-- ... -->
    </tbody>
</table>

Paso 3: inicializar el ordenamiento.

Lo colocaremos dentro de la estructura html en reemplazo del tag <!– js –>.

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 Demo – Descargar