Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)
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.
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:
1 |
<script type="text/javascript" src="./js/jquery-latest.js"></script> |
2 |
<script type="text/javascript" src="./js/jquery.tablesorter.min.js"></script> |
3 |
<link rel="stylesheet" href="./themes/blue/style.css" type="text/css" media="print, projection, screen" /> |
Después, construiremos la tabla HTML:
1 |
<table id="domainsTable" class="tablesorter"> |
2 |
<thead>
|
3 |
<tr>
|
4 |
<th>Domain name</th> |
5 |
<th>gTld</th> |
6 |
<th>Category</th> |
7 |
<th>Price</th> |
8 |
<th>Contact</th> |
9 |
</tr>
|
10 |
</thead>
|
11 |
<tbody>
|
12 |
<tr><td><a href="http://geogram.co">geogram.co</a></td><td>co</td><td>Internet</td><td>$49</td><td><a href="mailto:jeff@lookahead.io?subject=Offer for domain name: geogram.co">Purchase</a></td></tr> |
13 |
<tr><td><a href="http://newscloud.com">newscloud.com</a></td><td>com</td><td>News</td><td>$19999</td><td><a href="mailto:jeff@lookahead.io?subject=Offer for domain name: newscloud.com">Purchase</a></td></tr> |
14 |
<tr><td><a href="http://popcloud.com">popcloud.com</a></td><td>com</td><td>Music</td><td>$14999</td><td><a href="mailto:jeff@lookahead.io?subject=Offer for domain name: popcloud.com">Purchase</a></td></tr> |
15 |
<!-- ... -->
|
16 |
</tbody>
|
17 |
</table>
|
Después de eso, necesitamos iniciar Tablesorter cuando la página carga:
1 |
<script> |
2 |
$(document).ready(function() |
3 |
{
|
4 |
$("#domainsTable").tablesorter({sortList: [[3,1],[2,0]]}); |
5 |
}
|
6 |
);
|
7 |
</script> |
8 |
</body> |
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:
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:
Aquí está cómo luce una función de concatenación en Google Drive:
1 |
=CONCATENATE("<tr>","<td>",F2,"</td>","<td>",B2,"</td>","<td>",D2,"</td>","<td>$", TO_DOLLARS(E2),"</td>","<td>",G2,"</td>","</tr>")
|
Uso el tema Domena disponible en Envato Market como páginas de aterrizaje para cada dominio:
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:
Esta vez, iniciaremos Tablesorter en la etiqueta <head>. También agregaremos el script de complemento Tablesorter:
1 |
<script type="text/javascript" src="./js/jquery.tablesorter.pager.js"></script> |
2 |
<script type="text/javascript"> |
3 |
$(function() { |
4 |
$("table") |
5 |
.tablesorter({widthFixed: true, widgets: ['zebra']}) |
6 |
.tablesorterPager({container: $("#pager")}); |
7 |
});
|
8 |
</script> |
Colocaremos el div HTML para el paginador debajo de la tabla:
1 |
</table>
|
2 |
<div id="pager" class="pager"> |
3 |
<form>
|
4 |
<img src="./addons/pager/icons/first.png" class="first"/> |
5 |
<img src="./addons/pager/icons/prev.png" class="prev"/> |
6 |
<input type="text" class="pagedisplay"/> |
7 |
<img src="./addons/pager/icons/next.png" class="next"/> |
8 |
<img src="./addons/pager/icons/last.png" class="last"/> |
9 |
<select class="pagesize"> |
10 |
<option selected="selected" value="10">10</option> |
11 |
<option value="20">20</option> |
12 |
<option value="30">30</option> |
13 |
<option value="40">40</option> |
14 |
</select>
|
15 |
</form>
|
16 |
</div>
|
17 |
</body>
|
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:
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:
1 |
p><a id="add-com-domains" href="#">Add .COM Domains via AJAX</p> |
2 |
<script>
|
3 |
$(document).ready(function() |
4 |
{
|
5 |
$("#domainsTable").tablesorter({sortList: [[3,1],[2,0]]}); |
6 |
$("#add-com-domains").click(function() { |
7 |
$.get("./com-domains.html", function(html) { |
8 |
// append the "ajax'd" data to the table body
|
9 |
$("table tbody").append(html); |
10 |
// let the plugin know that we made a update
|
11 |
$("table").trigger("update"); |
12 |
// set sorting column and direction, this will sort on the third and second column
|
13 |
var sorting = [[3,1],[2,0]]; |
14 |
$("table").trigger("sorton",[sorting]); |
15 |
});
|
16 |
$(this).hide(); |
17 |
return false; |
18 |
});
|
19 |
}
|
20 |
);
|
21 |
</script>
|
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
By
