Ordenar tablas con jQuery

Ordenar tablas con jQuery (tableSorter)

Hoy en día es muy común tener que ordenar tablas con jQuery. Es por eso que en este tutorial aprenderemos a realizar esta tarea utilizando el plugin para jQuery llamado tableSorter. Este simple plugin permite ordenar tablas por columna de cualquier tipo, ya sea números, fechas o palabras.

¿Cómo ordenar tablas con jQuery?

Antes de comenzar a tirar código debemos incluir las dependencias de jQuery y del plugin tableSorter, este último lo pueden descargar desde su sitio oficial http://tablesorter.com/docs/#Download.

Una vez descargada podemos empezar con nuestro ejemplo. El siguiente código es el ejemplo más básico para ordenar una tabla con diferente columnas:

<html>
  <head>
    <title>Ordenar listas con jQuery</title>
    <style type="text/css">@import "themes/blue/style.css";</style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.tablesorter.js"></script>
    <script type="text/javascript">
     $(function(){
      //Cuando la página se cargue convertimos la tabla con id "myTable" en una tabla ordenable
      $("#myTable").tablesorter();
    });
    </script>
    <style>
      body{font-family:Arial;}
    </style>	
  </head>
  <body>
    <table id="myTable" class="tablesorter">
      <thead>
        <tr>
          <th>Nombre</th>
          <th>Apellido</th>
          <th>Email</th>
          <th>Compra total</th>
          <th>Web</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Smith</td>
          <td>John</td>
          <td>jsmith@gmail.com</td>
          <td>$50.00</td>
          <td>http://www.jsmith.com</td>
        </tr>
        <tr>
          <td>Bach</td>
          <td>Frank</td>
          <td>fbach@yahoo.com</td>
          <td>$50.00</td>
          <td>http://www.frank.com</td>
        </tr>
        <tr>
          <td>Doe</td>
          <td>Jason</td>
          <td>jdoe@hotmail.com</td>
          <td>$100.00</td>
          <td>http://www.jdoe.com</td>
        </tr>
        <tr>
          <td>Conway</td>
          <td>Tim</td>
          <td>tconway@earthlink.net</td>
          <td>$50.00</td>
          <td>http://www.timconway.com</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

La tabla anterior se puede visualizar en la siguiente captura de pantalla:

tableSorter jQuery

Tabla ordenada con jQuery

Es importante mencionar que el tema se puede cambiar o incluso crear uno propio con CSS.

Con ese código simple ya podemos ordenar una tabla con diferentes columnas. Es muy importante saber que este plugin admite muchas más configuraciones, estas mismas las pueden ver en el sitio oficial (ya mencionado antes) donde también pueden encontrar muchos ejemplos.

Bueno hemos llegado al final de este tutorial, espero que les haya servido y ante cualquier problema no duden en dejar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *