Ich habe gerade eine alte Lösung überarbeitet und dachte, ich würde sie zum ~ 5-jährigen Jubiläum neu gestalten!
- Einfaches Javascript (ES6)
- Führt alphanumerische Sortierung durch - aufsteigend und absteigend
- Funktioniert in Chrome , Firefox , Safari (und IE11 , siehe unten)
Schnelle Erklärung
- füge
click
allen header ( th
) Zellen ein Ereignis hinzu ...
table
Finden Sie für den aktuellen alle Zeilen (außer der ersten) ...
- Sortieren Sie die Zeilen nach dem Wert der angeklickten Spalte ...
- Fügen Sie die Zeilen in der neuen Reihenfolge wieder in die Tabelle ein.
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
const comparer = (idx, asc) => (a, b) => ((v1, v2) =>
v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
)(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr) );
})));
table, th, td {
border: 1px solid black;
}
th {
cursor: pointer;
}
<table>
<tr><th>Country</th><th>Date</th><th>Size</th></tr>
<tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr>
<tr><td><a href=#>spain</a></td><td><i>2005-05-05</i></td><td></td></tr>
<tr><td><b>Lebanon</b></td><td><a href=#>2002-02-02</a></td><td><b>-17</b></td></tr>
<tr><td><i>Argentina</i></td><td>2005-04-04</td><td><a href=#>100</a></td></tr>
<tr><td>USA</td><td></td><td>-6</td></tr>
</table>
IE11-Unterstützung (nicht ES6)
Wenn Sie IE11 unterstützen möchten, müssen Sie die ES6-Syntax aufgeben und Alternativen zu Array.from
und verwenden Element.closest
.
dh
var getCellValue = function(tr, idx){ return tr.children[idx].innerText || tr.children[idx].textContent; }
var comparer = function(idx, asc) { return function(a, b) { return function(v1, v2) {
return v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2);
}(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
}};
Array.prototype.slice.call(document.querySelectorAll('th')).forEach(function(th) { th.addEventListener('click', function() {
var table = th.parentNode
while(table.tagName.toUpperCase() != 'TABLE') table = table.parentNode;
Array.prototype.slice.call(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.prototype.slice.call(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(function(tr) { table.appendChild(tr) });
})
});
this.asc = !this.asc
$
usw.), bevor Sie den Vergleich durchführen -> und die Währungen werden als Zahlen behandelt. Das,
Trennzeichen bedeutet verschiedene Dinge an verschiedenen Orten (dh "Tausend" -Trennzeichen (Australien) gegenüber "Dezimal" -Trennzeichen (Europa)). Ich überlasse Ihnen diese Lösung.Ich habe einen Code geschrieben, der eine Tabelle nach einer Zeile sortiert, vorausgesetzt, nur eine
<tbody>
und Zellen haben keinen Colspan .function sortTable(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); tr = tr.sort(function (a, b) { // sort rows return reverse // `-1 *` if want opposite order * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test .localeCompare(b.cells[col].textContent.trim()) ); }); for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order } // sortTable(tableNode, columId, false);
Wenn Sie die oben genannten Annahmen nicht treffen möchten, müssen Sie überlegen, wie Sie sich unter den jeweiligen Umständen verhalten möchten. (zB alles in eins setzen
<tbody>
oder alle vorhergehenden Colspan- Werte addieren usw.)Sie können dies dann an jede Ihrer Tabellen anhängen, z. B. unter der Annahme, dass Titel vorhanden sind
<thead>
function makeSortable(table) { 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 while (--i >= 0) (function (i) { var dir = 1; th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))}); }(i)); } function makeAllSortable(parent) { parent = parent || document.body; var t = parent.getElementsByTagName('table'), i = t.length; while (--i >= 0) makeSortable(t[i]); }
und dann
makeAllSortable
Onload aufrufen .Beispiel Geige davon auf einem Tisch arbeiten.
quelle
makeAllSortable()
zur Körperbelastung richtig hinzufügen?.textContent.trim()
(die sich nicht basierend auf dem Status des Kontrollkästchens usw. ändert). Wenn Sie auf andere Weise entscheiden möchten, bringen Sie ihm bei, wie es geht.sort
.numeric: true
eine und du wirst gut mit Zahlen umgehen können, sogar innerhalb von Strings. Ersetzen.localeCompare(b.cells[col].textContent.trim())
durch.localeCompare(b.cells[col].textContent.trim(), undefined, {numeric: true})
Die akzeptierte Antwort von Nick Grealy ist großartig, wirkt aber etwas eigenartig, wenn sich Ihre Zeilen innerhalb eines
<tbody>
Tags befinden (die erste Zeile wird nie sortiert und nach dem Sortieren landen die Zeilen außerhalb des tbody-Tags und verlieren möglicherweise die Formatierung).Dies ist jedoch eine einfache Lösung:
Nur ändern:
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => { const table = th.closest('table'); Array.from(table.querySelectorAll('tr:nth-child(n+2)')) .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc)) .forEach(tr => table.appendChild(tr) );
zu:
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => { const table = th.closest('table'); const tbody = table.querySelector('tbody'); Array.from(tbody.querySelectorAll('tr')) .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc)) .forEach(tr => tbody.appendChild(tr) );
quelle
Es ist viel mehr als "nur sortieren", aber dataTables.net macht das, was Sie brauchen. Ich benutze es täglich und ist gut unterstützt und sehr schnell (erfordert jQuery)
http://datatables.net/
Google Visualisierungen ist eine weitere Option, erfordert jedoch etwas mehr Setup als dataTables, erfordert jedoch KEIN bestimmtes Framework / keine bestimmte Bibliothek (außer google.visualizations):
http://code.google.com/apis/ajax/playground/?type=visualization#table
Und es gibt noch andere Möglichkeiten ... insbesondere, wenn Sie eines der anderen JS-Frameworks verwenden. Dojo, Prototype usw. verfügen alle über verwendbare "Tabellenerweiterungs" -Plugins, die bei minimaler Tabellensortierfunktionalität Funktionen bieten. Viele bieten mehr, aber ich werde es noch einmal wiederholen ... Ich habe noch keinen gefunden, der so leistungsfähig und SCHNELL ist wie datatables.net.
quelle
Die beste Möglichkeit, HTML-Tabellen mit Javascript zu sortieren, ist die folgende Funktion.
Übergeben Sie einfach die ID der Tabelle, die Sie sortieren möchten, und die Spaltennummer in der Zeile. Es wird davon ausgegangen, dass die Spalte, die Sie sortieren, numerisch ist oder Zahlen enthält. Sie wird durch Regex ersetzt, um die Zahl selbst zu erhalten (ideal für Währungen und andere Zahlen mit Symbolen).
function sortTable(table_id, sortColumn){ var tableData = document.getElementById(table_id).getElementsByTagName('tbody').item(0); var rowData = tableData.getElementsByTagName('tr'); for(var i = 0; i < rowData.length - 1; i++){ for(var j = 0; j < rowData.length - (i + 1); j++){ if(Number(rowData.item(j).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, "")) < Number(rowData.item(j+1).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, ""))){ tableData.insertBefore(rowData.item(j+1),rowData.item(j)); } } } }
Am Beispiel:
$(function(){ // pass the id and the <td> place you want to sort by (td counts from 0) sortTable('table_id', 3); });
quelle
sortTable('table_id', 3)
direkt anrufen ?Sie könnten mit einem JSON-Array und der
sort
Funktion umgehen . Es ist eine ziemlich einfach zu verwaltende Struktur (z. B. Sortieren).Ungetestet, aber hier ist die Idee. Dies würde eine Mehrfachreihenfolge und eine sequentielle Reihenfolge unterstützen, wenn Sie ein Array übergeben, in dem Sie die Spalten in der Reihenfolge platzieren, in der sie sortiert werden sollen.
var DATA_TABLE = { {name: 'George', lastname: 'Blarr', age:45}, {name: 'Bob', lastname: 'Arr', age: 20} //... }; function sortDataTable(arrayColNames, asc) { // if not asc, desc for (var i=0;i<arrayColNames.length;i++) { var columnName = arrayColNames[i]; DATA_TABLE = DATA_TABLE.sort(function(a,b){ if (asc) { return (a[columnName] > b[columnName]) ? 1 : -1; } else { return (a[columnName] < b[columnName]) ? 1 : -1; } }); } } function updateHTMLTable() { // update innerHTML / textContent according to DATA_TABLE // Note: textContent for firefox, innerHTML for others }
Stellen wir uns nun vor, Sie müssen nach Nachname, dann nach Name und schließlich nach Alter bestellen.
var orderAsc = true; sortDataTable(['lastname', 'name', 'age'], orderAsc);
Es sollte zu etwas führen wie:
{name: 'Jack', lastname: 'Ahrl', age: 20}, {name: 'Jack', lastname: 'Ahrl', age: 22}, //...
quelle
Hier ist ein vollständiges Beispiel mit reinem JavaScript. Der zum Sortieren verwendete Algorithmus ist im Grunde BubbleSort . Hier ist eine Geige .
Sie können die Quelle auch hier einsehen : https://github.com/wmentzel/table-sort
quelle
Sortieren von Tabellenzeilen nach Zellen. 1. Etwas einfacher und hat einige Funktionen. 2. Unterscheiden Sie beim Sortieren zwischen 'Nummer' und 'Zeichenfolge'. 3. Fügen Sie einen Schalter hinzu, um nach ASC, DESC zu sortieren
var index; // cell index var toggleBool; // sorting asc, desc function sorting(tbody, index){ this.index = index; if(toggleBool){ toggleBool = false; }else{ toggleBool = true; } var datas= new Array(); var tbodyLength = tbody.rows.length; for(var i=0; i<tbodyLength; i++){ datas[i] = tbody.rows[i]; } // sort by cell[index] datas.sort(compareCells); for(var i=0; i<tbody.rows.length; i++){ // rearrange table rows by sorted rows tbody.appendChild(datas[i]); } } function compareCells(a,b) { var aVal = a.cells[index].innerText; var bVal = b.cells[index].innerText; aVal = aVal.replace(/\,/g, ''); bVal = bVal.replace(/\,/g, ''); if(toggleBool){ var temp = aVal; aVal = bVal; bVal = temp; } if(aVal.match(/^[0-9]+$/) && bVal.match(/^[0-9]+$/)){ return parseFloat(aVal) - parseFloat(bVal); } else{ if (aVal < bVal){ return -1; }else if (aVal > bVal){ return 1; }else{ return 0; } } }
Unten ist ein HTML-Beispiel
<table summary="Pioneer"> <thead> <tr> <th scope="col" onclick="sorting(tbody01, 0)">No.</th> <th scope="col" onclick="sorting(tbody01, 1)">Name</th> <th scope="col" onclick="sorting(tbody01, 2)">Belong</th> <th scope="col" onclick="sorting(tbody01, 3)">Current Networth</th> <th scope="col" onclick="sorting(tbody01, 4)">BirthDay</th> <th scope="col" onclick="sorting(tbody01, 5)">Just Number</th> </tr> </thead> <tbody id="tbody01"> <tr> <td>1</td> <td>Gwanshic Yi</td> <td>Gwanshic Home</td> <td>120000</td> <td>1982-03-20</td> <td>124,124,523</td> </tr> <tr> <td>2</td> <td>Steve Jobs</td> <td>Apple</td> <td>19000000000</td> <td>1955-02-24</td> <td>194,523</td> </tr> <tr> <td>3</td> <td>Bill Gates</td> <td>MicroSoft</td> <td>84300000000</td> <td>1955-10-28</td> <td>1,524,124,523</td> </tr> <tr> <td>4</td> <td>Larry Page</td> <td>Google</td> <td>39100000000</td> <td>1973-03-26</td> <td>11,124,523</td> </tr> </tbody> </table>
quelle
Ein weiterer Ansatz zum Sortieren von HTML-Tabellen. (basierend auf W3.JS HTML Sort )
var collection = [{ "Country": "France", "Date": "2001-01-01", "Size": "25", }, { "Country": "spain", "Date": "2005-05-05", "Size": "", }, { "Country": "Lebanon", "Date": "2002-02-02", "Size": "-17", }, { "Country": "Argentina", "Date": "2005-04-04", "Size": "100", }, { "Country": "USA", "Date": "", "Size": "-6", }] for (var j = 0; j < 3; j++) { $("#myTable th:eq(" + j + ")").addClass("control-label clickable"); $("#myTable th:eq(" + j + ")").attr('onClick', "w3.sortHTML('#myTable', '.item', 'td:nth-child(" + (j + 1) + ")')"); } $tbody = $("#myTable").append('<tbody></tbody>'); for (var i = 0; i < collection.length; i++) { $tbody = $tbody.append('<tr class="item"><td>' + collection[i]["Country"] + '</td><td>' + collection[i]["Date"] + '</td><td>' + collection[i]["Size"] + '</td></tr>'); }
.control-label:after { content: "*"; color: red; } .clickable { cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.w3schools.com/lib/w3.js"></script> <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> <p>Click the <strong>table headers</strong> to sort the table accordingly:</p> <table id="myTable" class="w3-table-all"> <thead> <tr> <th>Country</th> <th>Date</th> <th>Size</th> </tr> </thead> </table>
quelle
Falls Ihre Tabelle nicht
th
s, sondern nurtd
s enthält (einschließlich Überschriften), können Sie Folgendes versuchen, das auf der obigen Antwort von Nick Grealy basiert:const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent; const comparer = (idx, asc) => (a, b) => ((v1, v2) => v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2) )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx)); // do the work... document.querySelectorAll('tr:first-child td').forEach(td => td.addEventListener('click', (() => { const table = td.closest('table'); Array.from(table.querySelectorAll('tr:nth-child(n+2)')) .sort(comparer(Array.from(td.parentNode.children).indexOf(td), this.asc = !this.asc)) .forEach(tr => table.appendChild(tr) ); })));
@charset "UTF-8"; @import url('https://fonts.googleapis.com/css?family=Roboto'); *{ font-family: 'Roboto', sans-serif; text-transform:capitalize; overflow:hidden; margin: 0 auto; text-align:left; } table { color:#666; font-size:12px; background:#124; border:#ccc 1px solid; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; border-collapse: collapse; width: 100%; } table td { padding:10px; border-top: 1px solid #ffffff; border-bottom:1px solid #e0e0e0; border-left: 1px solid #e0e0e0; background: #fafafa; background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa)); background: -moz-linear-gradient(top, #fbfbfb, #fafafa); width: 6.9in; } table tbody tr:first-child td { background: #124!important; color:#fff; } table tbody tr th { padding:10px; border-left: 1px solid #e0e0e0; background: #124!important; color:#fff; }
<table> <tr><td>Country</td><td>Date</td><td>Size</td></tr> <tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr> <tr><td>spain</td><td>2005-05-05</td><td></td></tr> <tr><td>Lebanon</td><td>2002-02-02</td><td><b>-17</b></td></tr> <tr><td>Argentina</td><td>2005-04-04</td><td>100</td></tr> <tr><td>USA</td><td></td><td>-6</td></tr> </table>
quelle
Sortieren der HTML-Tabellenspalte beim Laden der Seite
var table = $('table#all_items_table'); var rows = table.find('tr:gt(0)').toArray().sort(comparer(3)); for (var i = 0; i < rows.length; i++) { table.append(rows[i]) } function comparer(index) { return function (a, b) { var v1= getCellValue(a, index), v2= getCellValue(b, index); return $.isNumeric(v2) && $.isNumeric(v1) ? v2 - v1: v2.localeCompare(v1) } } function getCellValue(row, index) { return parseFloat($(row).children('td').eq(index).html().replace(/,/g,'')); //1234234.45645->1234234 }
quelle
Ich habe den Code aus einem der Beispiele hier bearbeitet, um jquery zu verwenden. Es ist immer noch nicht 100% jquery. Irgendwelche Gedanken zu den zwei verschiedenen Versionen, wie sind die Vor- und Nachteile der einzelnen ?
function column_sort() { getCellValue = (tr, idx) => $(tr).find('td').eq( idx ).text(); comparer = (idx, asc) => (a, b) => ((v1, v2) => v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2) )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx)); table = $(this).closest('table')[0]; tbody = $(table).find('tbody')[0]; elm = $(this)[0]; children = elm.parentNode.children; Array.from(tbody.querySelectorAll('tr')).sort( comparer( Array.from(children).indexOf(elm), table.asc = !table.asc)) .forEach(tr => tbody.appendChild(tr) ); } table.find('thead th').on('click', column_sort);
quelle
<!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid; border-collapse: collapse; } td , th { padding: 5px; width: 100px; } th { background-color: lightgreen; } </style> </head> <body> <h2>JavaScript Array Sort</h2> <p>Click the buttons to sort car objects on age.</p> <p id="demo"></p> <script> var nameArrow = "", yearArrow = ""; var cars = [ {type:"Volvo", year:2016}, {type:"Saab", year:2001}, {type:"BMW", year:2010} ]; yearACS = true; function sortYear() { if (yearACS) { nameArrow = ""; yearArrow = "🔽"; cars.sort(function(a,b) { return a.year - b.year; }); yearACS = false; }else { nameArrow = ""; yearArrow = "🔼"; cars.sort(function(a,b) { return b.year - a.year; }); yearACS = true; } displayCars(); } nameACS = true; function sortName() { if (nameACS) { nameArrow = "🔽"; yearArrow = ""; cars.sort(function(a,b) { x = a.type.toLowerCase(); y = b.type.toLowerCase(); if (x > y) {return 1;} if (x < y) {return -1}; return 0; }); nameACS = false; } else { nameArrow = "🔼"; yearArrow = ""; cars.sort(function(a,b) { x = a.type.toUpperCase(); y = b.type.toUpperCase(); if (x > y) { return -1}; if (x <y) { return 1 }; return 0; }); nameACS = true; } displayCars(); } displayCars(); function displayCars() { var txt = "<table><tr><th onclick='sortName()'>name " + nameArrow + "</th><th onclick='sortYear()'>year " + yearArrow + "</th><tr>"; for (let i = 0; i < cars.length; i++) { txt += "<tr><td>"+ cars[i].type + "</td><td>" + cars[i].year + "</td></tr>"; } txt += "</table>"; document.getElementById("demo").innerHTML = txt; } </script> </body> </html>
quelle