Para ordenar una tabla cualesquiera que tenga los títulos en <thead> y el contenido en <tbody>,
("esto es esencial") basta agregar el script y las 4 clases.
Es importante que los datos a ordenar estén entre las etiquetas <td> sin ningún otro dato hidden y
sin otras etiquetas (por ejemplo <span> o <dir>).
TIPS:
- En la linea 4 table.find('tr').slice(1).toArray(); el índice 1 indica que se
recorta toda la tabla, si queremos que la primera fila no se ordene por ejemplo parque
contiene campos de formulario para busqueda o nuevo registro, basta cambiar a
table.find('tr').slice(2).toArray();.
- Cambiar si se desea los íconos de las clases asc y desc y el color de la clase sorting
Para un ejemplo completo de ordenamiento
Clic aquí.
<head>
<script src="../scripts/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function(){
//************************ORDENAR LAS FILAS*************************************
$('th').click(function() { // 1 al clicar sobre la cabecera de cualquier columna
if($(this).html().length !=0){ // 2 bis si la celda está en blanco, no hago nada
var table = $(this).parents('table').eq(0); // 3 busca la tabla a la cual pertenece la columna
// .eq(0) selecciona el primer elemento del set.
var rows = table.find('tr').slice(1).toArray(); // 4 Busca el primer tr, corta en el 1° (slice(1)) lo incluye.
var columna = $(this).index(); // 5 recupero el índice de la columna (empieza en cero)
rows.sort(comparador(columna)); // 6 sort ordena el array usando la funcion comparador.
this.asc = !this.asc // 7 al principio this.asc es undefined no está ordenada
// así que lo niego !undefined = true .
if (!this.asc) { // 8 la primera vez es !true no se efectua.
rows = rows.reverse() // 9 si es !false invierte el orden del array
}
for (var i = 0; i < rows.length; i++) { // 10 el bucle agrega desde 0 a la última las filas ordenadas
table.append(rows[i]);
}
CambiaIcono($(this), this.asc); // 11 coloca o cambia el ícono de orden y el color del head.
}
})
function comparador(col) { // 12 función comparador de .sort pasa el índice de columna
var dateFormat = /(^\d{1,4}[\.|\\/|-]\d{1,2}[\.|\\/|-]\d{1,4})(\s*(?:0?[1-9]:[0-5]|1(?=[012])\d:[0-5])\d\s*[ap]m)?$/;
return function(a, b) {
var valA = $(a).children('td').eq(col).html();// 13 Mete el valor de la celda (fila superior, columna)
var valB = $(b).children('td').eq(col).html();// 14 Mete el valor de la celda (fila inferior, columna)
if (dateFormat.test(valA) && dateFormat.test(valB)) {
return compareDate(valA, valB); // 15 usa el regex dateFormat para ver si son fechas, si son
} // los manda a la función compareDate
if ($.isNumeric(valA) && $.isNumeric(valB)){// 16 si ambos valores son numéricos
return valA - valB; // 17 los resta
}else{
return valA.localeCompare(valB); // 18 si no compara los strings con el abecedario local.
}
}
}
function compareDate(valA, valB) { // 19 lleva las fechas a un formato único
var dateA = new Date(valA.replace(/(\d{2})\/(\d{2})\/(\d{4})/, "$2/$1/$3"));
var dateB = new Date(valB.replace(/(\d{2})\/(\d{2})\/(\d{4})/, "$2/$1/$3"));
return dateA > dateB ? 1 : -1; // 20 compara numéricamente las fechas modificadas
}
function CambiaIcono(rotulo, orden) {
$("th").each(function(index) { // 21 para todas las celdas cabecera quita color y flechas
$(this).removeClass("sorting");
$(this).removeClass("asc");
$(this).removeClass("desc");
});
rotulo.addClass("sorting"); // 22 a la celda clicada le da anaranjado.
if (orden){ // 23 orden = this.asc true si es ascendente
rotulo.addClass("asc"); // 24 clase con :after flecha arriba
}else{
rotulo.addClass("desc"); // 25 clase con :after flecha abajo
}
}
});
</script>
<style>
table{
border-collapse:collapse;
margin-top: 50px;
color:#000000;
}
td{
border: #000 solid 1px;
width: 220px;
}
/* ****************************solo estas 4 clases son necesarias ********************************** */
table tr th {
cursor: pointer;
}
.sorting {
color:orangered;
}
.asc:after {
content: ' ↑';
}
.desc:after {
content: " ↓";
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>ORDEN</th>
<th>FECHA</th>
<th>OBSERVACIÓN</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>24/05/2007</td>
<td>Josefina</td>
</tr>
<tr>
<td>2</td>
<td>15/03/2007</td>
<td>Pedro</td>
</tr>
<tr>
<td>3</td>
<td>5/08/1997</td>
<td>Alicia</td>
</tr>
<tr>
<td>4</td>
<td>5/08/08</td>
<td>Zulma</td>
</tr>
<tr>
<td>5</td>
<td>7/12/23</td>
<td>Alcira</td>
</tr>
</tbody>
</table>
</body>