Cómo ordenar una tabla en el lado del cliente con JavaScript puro o jQuery

Seguramente ya ha revisado nuestro Top 7 de los mejores complementos de jQuery y JavaScript para ordenar tablas , y ha contemplado lo fácil y rápido que puede ordenar tablas con la ayuda de complementos de terceros. El uso de un complemento ofrece una ventaja y es que no necesita equivocarse con el código personalizado para pedir una tabla simple. Las bibliotecas ya resuelven problemas como el manejo de fechas, etc.

Sin embargo, en algunos casos, no puede simplemente usar un complemento para esta tarea porque no está permitido o simplemente quiere aprender cómo hacerlo usted mismo. En este artículo, compartiremos contigo 2 formas de ordenar las tablas alfabéticamente usando JavaScript simple o usando jQuery si lo prefieres.

Clasificar tablas con VanillaJS

Si de todos modos está dispuesto a ordenar una tabla sin un complemento, tendrá que escribir su propio código para ello. El siguiente objeto JavaScript (estilo de clase) ofrece el makeSortablemétodo que espera como primer argumento un elemento DOM de una tabla específicamente:

/**
 * Modified and more readable version of the answer by Paul S. to sort a table with ASC and DESC order
 * with the <thead> and <tbody> structure easily.
 * 
 * https://stackoverflow.com/a/14268260/4241030
 */
var TableSorter = {
    makeSortable: function(table){
        // Store context of this in the object
        var _this = this;
        var th = table.tHead, i;
        th && (th = th.rows[0]) && (th = th.cells);

        if (th){
            i = th.length;
        }else{
            return; // if no `<thead>` then do nothing
        }

        // Loop through every <th> inside the header
        while (--i >= 0) (function (i) {
            var dir = 1;

            // Append click listener to sort
            th[i].addEventListener('click', function () {
                _this._sort(table, i, (dir = 1 - dir));
            });
        }(i));
    },
    _sort: function (table, col, reverse) {
        var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
        tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
        i;

        reverse = -((+reverse) || -1);

        // Sort rows
        tr = tr.sort(function (a, b) {
            // `-1 *` if want opposite order
            return reverse * (
                // Using `.textContent.trim()` for test
                a.cells[col].textContent.trim().localeCompare(
                    b.cells[col].textContent.trim()
                )
            );
        });

        for(i = 0; i < tr.length; ++i){
            // Append rows in new order
            tb.appendChild(tr[i]);
        }
    }
};

El método se puede utilizar como se muestra en el siguiente ejemplo:

window.onload = function(){
    TableSorter.makeSortable(document.getElementById("myTable"));
};

Ordenar tablas con jQuery

Con jQuery el proceso es casi el mismo, sin embargo, podemos usar algunas utilidades como el método de búsqueda para encontrar los elementos dentro de sus tablas. Luego, adjuntaremos un oyente a cada uno de esos elementos y agregaremos el clasificador que usa localeCompare y la utilidad isNumber de jQuery:

/**
 * mini jQuery plugin based on the answer by Nick Grealy
 * 
 * https://stackoverflow.com/a/19947532/4241030
 */
(function($){
	$.fn.extend({
        makeSortable: function(){
            var MyTable = this;

            var getCellValue = function (row, index){ 
                return $(row).children('td').eq(index).text();
            };
            
            MyTable.find('th').click(function(){
                var table = $(this).parents('table').eq(0);
            
                // Sort by the given filter
                var rows = table.find('tr:gt(0)').toArray().sort(function(a, b) {
                    var index = $(this).index();
                    var valA = getCellValue(a, index), valB = getCellValue(b, index);
            
                    return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB);
                });
            
                this.asc = !this.asc;
            
                if (!this.asc){
                    rows = rows.reverse();
                }
            
                for (var i = 0; i < rows.length; i++){
                    table.append(rows[i]);
                }
            });
        }
    });
})(jQuery);

Se puede usar como:

$(function(){
	$("#myTable").makeSortable();
});

Después de los 2 ejemplos dados para ordenar tablas con jQuery o VanillaJS, seguramente vio cómo se usa localeCompare en ambos. El método localeCompare () devuelve un número que indica si una cadena de referencia viene antes o después o es la misma que la cadena dada en el orden de clasificación. Esta función está en el prototipo de String del motor JavaScript.

Que te diviertas ❤️!