Tengo una tabla que clasifico ASC por nombre de construcción. La siguiente columna es el número de edificio correspondiente para el edificio. Tengo una función que ordenará la tabla en orden ASC según el nombre del edificio. Quiero poder ordenar por el nombre del edificio y el número del edificio al mismo tiempo. Este es un fragmento de la tabla cuando se carga la página. El primer <td> que es el nombre del edificio va en orden. Sin embargo, el siguiente <td> , que es el número de edificio, no va en orden.
<tbody class="meterList"> <tr> <td>ACB</td> <td>A2095</td> </tr> <tr> <td>ACB</td> <td>E1559</td> </tr> <tr> <td>ACB</td> <td>E1540</td> </tr> <tr> <td>ADH</td> <td>A0001</td> </tr> <tr> <td>ADH</td> <td>E1076</td> </tr> <tr> <td>ADH</td> <td>S0001</td> </tr> <tr> <td>ADH</td> <td>E1075</td> </tr> </tbody>Esta es la función que uso para ordenar la tabla en orden ASC por nombre de edificio.
$('.meterList').find('tr').sort(function(a, b) { return $('td:first', a).text().localeCompare($('td:first', b).text()); }).appendTo($('.meterList')) Intenté hacer algo como esto para ordenar tanto el primero como el segundo <td> pero esto no funcionó.
$('.meterList').find('tr').sort(function(a, b) { return $('td:first, td:second', a).text().localeCompare($('td:first, td:second', b).text()); }).appendTo($('.meterList'))Si alguien tiene alguna idea de cómo puedo ordenar por dos columnas, cualquier consejo sería muy apreciado.
Esto debería hacerlo:
const t=(tr,i)=>tr.cells[i].textContent; $(".meterList tr").get() .sort((a,b)=>t(a,0).localeCompare(t(b,0)) || t(a,1).localeCompare(t(b,1))) .map(tr=>$(".meterList").append(tr)); <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <table><tbody class="meterList"> <tr> <td>ACB</td> <td>A2095</td> </tr> <tr> <td>ACB</td> <td>E1559</td> </tr> <tr> <td>ACB</td> <td>E1540</td> </tr> <tr> <td>ADH</td> <td>A0001</td> </tr> <tr> <td>ADH</td> <td>E1076</td> </tr> <tr> <td>ADH</td> <td>S0001</td> </tr> <tr> <td>ADH</td> <td>E1075</td> </tr> </tbody></table> Primero creé una pequeña función de ayuda t(tr,I) que me da el .textContent de la i -ésima celda para un <tr> dado.
Luego recopilo todos los <tr> s en una matriz ( .get() extrae la matriz actual de elementos DOM del objeto jQuery) y .sort() lo. La función sort-callback primero comparará las primeras celdas (índice = 0) de dos <tr> dados y, solo cuando la comparación devuelva 0 , se llevará a cabo la segunda comparación (observando las segundas celdas en cada <tr> ) .
Esto se puede hacer incluso sin crear variables o constantes visibles fuera de la construcción real de jQuery. De hecho, no queda mucho jQuery en el código anterior y se puede hacer fácilmente sin él. ;-)