Pedir presupuesto

TableSorter – tablas ordenadas con jQuery

Si alguna vez teniais pensado crear una tabla ordenada, TableSorter es la solución. Algunas de las ventajas son:

  • Sencillo de implementar
  • No hace falta refrescar la página para que se ordene.
  • Puede ordenadr por tipos de datos como:
    • Texto
    • Números
    • Monedas
    • Fechas
    • etc …
  • Tiene muchas opciones de personalización y ampliación.

Seguramente te bastan todas estas ventajas, así que vamos a ver como lo podemos implementar.

Como siempre lo primero que tendremos que hacer es descargarnos las librerías correspondientes:

Una vez descargados, tendremos que hacer la llamada a esas librerías entre las etiquetas «head» de la página.

[html]

[/html]

Una vez echa la llamada, crearemos una tabla, que en este caso seria esta:

[html]

Usuario e-mail Edad Profesion Url/Blog Curious curious@gmail.com 34 Webmaster http://www.nosfaltauno.es Papilous papilous@gmail.com 21 Carretillero http://www.nosfaltauno.com Colorate colorate@gmail.com 29 Bloguer http://www.colordeu.es/Blog Pingui pingui@gmail.com 40 Diseñador Gráfico http://www.colordeu.es Ursixs ur100@hotmail.com 17 Estudiante http://www.nfu.es

[/html]

Si os fijáis le he puesto un identificador que se llama “tablasort”. Este es muy importante, ya que será con lo que haremos la llamada. Y también, hay que tener en cuenta, que tenemos que tener bien especificadas las etiquetas “THEAD” y “TBODY”.

Ahora nos queda indicarle al plugin que tabla queremos que tenga la opción de ser ordenada:

[js]$(document).ready(function()
{
$(«#tablasort»).tablesorter();
}
);
[/js]

Podeis ver un ejemplo aqui.
O bien descargarlo

¿Te ha gustado?, Comparte!!

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en whatsapp
Compartir en email

3 comentarios

  1. Muy bueno, excelente! quisiera saber si tengo una tabla de 200 registros, como hago para que tenga «ascensor» vertical, muchísimas gracias.

  2. Para que ordenenara los números con signos de miles, modifique esta parte del código:

    ts.addParser({
    id: «digit»,
    is: function(s,table) {
    var c = table.config;
    return $.tablesorter.isDigit(s,c);
    },
    format: function(s) {
    return $.tablesorter.formatFloat(s.replace(new RegExp(/[^0-9]/g),»»));
    },
    type: «numeric»
    });

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es