Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. jQuery
Code

Introducción a Tablesorter

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Final product image
What You'll Be Creating

Tablesorter es un sencillo complemento jQuery que proporciona ordenamiento dinámico de columna y paginación en tus tablas HTML. Es agradable proporcionar tablas ordenables y planeadas que no requieren que el usuario refresque la página. También puedes usarlo cuando estés usando Ajax en tu aplicación.

Este tutorial presentará código real y tres ejemplos de usar Tablesorter. Puedes descargar el código en GitHub. Nota que a la descarga de Tablersorter le faltan algunas imágenes gráficas para sus paginadores, así que tal vez quieras usar mis archivos de GitHub.

Download the code for this Tablesorter demo at Github

Ejemplo 1: Tablesorter Básico

Mi primer ejemplo te muestra cómo usar Tablesorter para proporcionar una lista ordenable de dominios de Internet a la venta. Puedes ver la demostración aquí y el código aquí.

Hay algunos cuántos componentes que necesitamos configurar para Tablesorter. Primero, tenemos que cargar jQuery y el complemento tablesorter. También cargaré su tema CSS azul:

Después, construiremos la tabla HTML:

Después de eso, necesitamos iniciar Tablesorter cuando la página carga:

En el ejemplo de arriba, estoy estableciendo la cuarta columna, que es la columna de precio, para acomodar en orden descendente, y estoy estableciendo la tercera columna, que es la columna de categoría, para acomodar en orden ascendente.

Una vez hecho, debería ver algo como esto:

Basic tablesorter

Si no estás cargando tus tablas de manera dinámica desde una base de datos, podrías estarte preguntando si hay una manera más sencilla de generar código de tabla HTML desde listas largas. ¡La hay! La describo en Cómo Aparcar, Listar y Vender Tus Dominios.

Básicamente, estoy usando una hoja de cálculo de Google Drive que lista mis dominios, categorías, y precios, y uso funciones de concatenación para generar aliases de servidor Apache, código de precio JavaScript, y el HTML de fila de tabla Tablesorter:

My Google Drive HTML Generating Spreadsheet

Aquí está cómo luce una función de concatenación en Google Drive:

Uso el tema Domena disponible en Envato Market como páginas de aterrizaje para cada dominio:

My Domains for Sale page powered by Domena Theme

He personalizado JavaScript en el tema para cambiar el precio basado en el dominio que está cargado. Creo que las nuevas versiones de Domena manejan múltiples dominios de manera más elegante.

Ejemplo 2: Paginando Con Tablesorter

Ahora, te mostraremos cómo implementar paginación con Tablesorter. Puedes ver la demostración aquí y obtener el código aquí. Debería lucir algo como esto:

Paging with Tablesorter

Esta vez, iniciaremos Tablesorter en la etiqueta <head>. También agregaremos el script de complemento Tablesorter:

Colocaremos el div HTML para el paginador debajo de la tabla:

Eso es.

Nota que encontré que los iconos paginadores habían sido borrados del sitio GitHub de Tablesorter, así que los descargué manualmente desde el demo. Podría ser más sencillo para ti obtenerlos desde la versión bifurcada del repositorio Tuts+.

Ejemplo 3: Carga Ajax

Ahora veremos cómo usar jQuery para poblar una tabla Tablesorter de manera dinámica. Para comenzar, iniciaremos una tabla Tablesorter con solo dominios .IO. Lucirá algo como esto:

The AJAX Tablesorter Demo

Cuando das clic al enlace Agregar Dominios .COM, verás a la tabla expandirse con dominios .COM.

Puedes ver la demostración aquí y el código aquí. El HTML para la petición Ajax con los dominios .COM está aquí.

Aquí está el código que responde al evento de clic, cargando filas adicionales vía Ajax:

Tablesorter definitivamente puede mejorar la experiencia de usuario si se usa bien.

Espero que hayas encontrado este tutorial útil. Por favor siéntete libre de publicar correcciones, preguntas o comentarios abajo. También puedes contactarme en Twitter @reifman o mandarme correo electrónico directamente.

Enlaces Relacionados

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.