¿Cómo puedo ordenar mi tabla por dos columnas (Nombre, Disponible) en la carga de la página? Puedo usar vainilla js
<table class="table_sort"> <thead> <tr> <th class="sorted-asc">Name</th> <th>Genre</th> <th>Publish year</th> <th>Quanity</th> <th class="available">Available</th> </tr> </thead> <tbody id="tbody"> <tr> <td>aname1</td> <td>genre1</td> <td>year1</td> <td>quantity1</td> <td>2</td> </tr> <tr> <td>name1</td> <td>genre1</td> <td>year1</td> <td>quantity1</td> <td>1</td> </tr> <tr> <td>aname1</td> <td>genre1</td> <td>year1</td> <td>quantity1</td> <td>10</td> </tr> <tr> <td>aname1</td> <td>genre1</td> <td>year1</td> <td>quantity1</td> <td>6</td> </tr> </tbody> </table>Intento ordenar mi tabla por dos columnas: Nombre, Disponible pero no funciona.
document.addEventListener('DOMContentLoaded', () => { const table = document.querySelector('.table_sort'); const indexToSorting = [...table.tHead.rows[0].cells].findIndex(cell => cell.classList.contains('sorted-asc')); const availableIndexes = [...table.tHead.rows[0].cells].findIndex(cell => cell.classList.contains('available')); const sortedRows = [...table.tBodies[0].rows].sort((rowA, rowB) => { let cellC; let cellD; const sortedRowsByAvailable = [...table.tBodies[0].rows].sort((rowC, rowD) => { cellC = rowC.cells[availableIndexes].innerText; cellD = rowD.cells[availableIndexes].innerText; const availableComparison = cellC.localeCompare(cellD); return availableComparison; }); const cellA = rowA.cells[indexToSorting].innerText; const cellB = rowB.cells[indexToSorting].innerText; const nameComparison = cellA.localeCompare(cellB); return nameComparison !== 0 ? nameComparison : sortedRowsByAvailable }); table.tBodies[0].append(...sortedRows);});
Mi tabla está ordenada por nombre, pero necesito ordenarla por columnas: nombre, disponible. ¿Dónde está mi error? no entiendo ayudenme por favor
TBH, no entendí por qué hiciste cellA - cellB , pero necesitas agregar una comparación para las celdas Available en caso de cellA y cellB sean iguales.
const rowAAvailable = rowA.cells[indexToSorting].innerText; const rowBAbailable = rowB.cells[indexToSorting].innerText; const nameComparison = cellA.localeCompare(cellB); const availableComparison = rowAAvailable.localeCompare(rowBAbailable); // sorry for terrible naming, but you get the idea return nameComparison !== 0 ? nameComparison : availableComparisonEsto ordenará su tabla por nombre como la primera prioridad y estará disponible como la segunda.