ORDENAR TABLA CLICANDO LOS TÍTULOS
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>
							
					
© IQSystems 2023