Ordenamiento de filas de una tabla con JQuery

En ocasiones se nos presenta el problema de querer ordenar la información de una tabla ya sea de forma ascendente o descendente.

En este artículo les voy a mostrar como ordenar dicha información usando solamente JQuery.

Lo primero es tener referenciada la librería JQuery que vamos a utilizar en nuestra pagina

<script src="jquery-x-x/jquery-x.x.x.js" type="text/javascript"></script>

Luego comenzamos por costruir el código html que vamos a utilizar para este ejemplo….

<table id=”mitabla”> <thead> <tr> <th>Nombre </th> <th>Sexo</th> <th>Edad</th> </tr> </thead> <tbody> <tr> <td><input type=”text” name=”nombre[]” class=”nombre” id=”nombre1” /> </td> <td><input type=”text” name=”sexo[]” class=”sexo” id=”sexo1” /> </td> <td><input type=”text” name=”edad[]” class=”edad” id=”edad1” /> </td> </tr> <tr> <td><input type=”text” name=”nombre[]” class=”nombre” id=”nombre2” /> </td> <td><input type=”text” name=”sexo[]” class=”sexo” id=”sexo2” /> </td> <td><input type=”text” name=”edad[]” class=”edad” id=”edad2” /> </td> </tr> <tr> <td><input type=”text” name=”nombre[]” class=”nombre” id=”nombre2” /> </td> <td><input type=”text” name=”sexo[]” class=”sexo” id=”sexo2” /> </td> <td><input type=”text” name=”edad[]” class=”edad” id=”edad2” /> </td> </tr> </tbody> </table>

Hay que tener bien definido en la tabla la cabecera(<thead>) y el cuerpo de la misma(<tbody>) debido a que la función de ordenamiento ordenara por los elementos contenidos en el <tbody>

Una vez tenido el código html agregamos la siguiente función JQuery:

<script type="text/javascript"> var SORTER = {}; SORTER.sort = function(which, dir) { SORTER.dir = (dir == "desc") ? -1 : 1; $(which).each(function() { var sorted = $(this).find("> tr").sort(function(a, b) { return $(a).find(input.age).val() > $(b).find('input.age).val() ? SORTER.dir : -SORTER.dir; }); $(this).append(sorted); }); }; </script>

Donde:

SORTER: será una variable con una función almacenada.

which: el elemento a ordenar(en este caso la tabla).

dir: la dirección a la que va a ordenar(ascendente(asc) o descendente(desc)).

La función sort es una vieja función de JavaScript que ordena un arreglo basado en la función que se le pasa.

Ahora probemos la función agregando el siguiente código JQuery

<script type="text/javascript"> $(document).ready(function() { SORTER.sort('#mitabla tbody'); }) </script>

El orden en el que la función ordenara los elementos puede ser modificado cambiando el operador de mayor que(>) por el operador menor que(<) en la función antes descrira.

Espero les haya servido de ayuda.

Saludos