Categorías: Tutorial

TinySort: como ordenar con jQuery por texto o atributos

Empezamos nuestra categoría de «Tutoriales» con un primer truco que nos puede sacar de un apuro en más de una ocasión. En este caso consiste en ordenar mediante jQuery cualquier etiqueta HTML por el texto o cualquier atributo asociado a ella. Para ello os traemos un plugin llamado TinySort.

En nuestro caso, con uno de nuestros últimos proyectos nos vimos en la necesidad de ordenar un listado (etiquetas <li>) alfabéticamente por ID. Cada uno de los identificadores empezaba con una letra seguida de un largo número. Con TinySort fue tan fácil como cargar jQuery, el script del plugin y una sola línea de código. Más o menos algo así:

<html>
<head>
    <title>Proyecto Kido Estudio</title>
    <script src="js/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="js/jquery.tinysort.js"></script>
    <script src="js/jquery.tinysort.charorder.js"></script>
    <script>
        $("#tulistado > li").tsort("",{attr:"id",order:'asc'});
    </script>
</head>
<body>
    <ul id="tulistado">
        <li id="D223764534">Elemento 3</li>
        <li id="C281974673">Elemento 2</li>
        <li id="B194753937">Elemento 1</li>
        <li id="F296585687">Elemento 4</li>
    </ul>
</body>
</html>

Este plugin para jQuery tiene muchas opciones, como ordenar aleatoriamente o por varios atributos. Para descargar los archivos necesarios y ver una buena cantidad de ejemplos, visita su web haciendo click aquí (en inglés)

TinySort: como ordenar con jQuery por texto o atributos enero 12th, 2018Jose Antonio Vila

Jose Antonio Vila

Desarrollando webs desde hace más de 10 años. Hace mucho que dejé atrás la vida en agencias y me abracé a la vida de freelance. 🖥 Si tienes algún proyecto en mente, contacta conmigo. 📖 Si quieres leer más cosas que escribo, echa un ojo a mi web personal