Я использую вот такой скрипт для сортировки таблицы
function sorttbl(head, selector, numrow, dtype) {
let table, rows, switching, i, x, y, xx, yy, shouldSwitch, dir, switchcount = 0;
table = document.querySelector(selector);
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.rows;
for (i = head; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[numrow];
y = rows[i + 1].getElementsByTagName("TD")[numrow];
if (dtype == "num") {
xx = parseFloat(x.innerHTML);
yy = parseFloat(y.innerHTML);
} else {
xx = x.innerHTML.toLowerCase();
yy = y.innerHTML.toLowerCase();
}
if (dir == "asc") {
if (xx > yy) {
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (xx < yy) {
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
Далее где нужно вешаю вызов функции(обычно на заголовках таблицы).
Поясню параметры:
head - если таблица имеет заголовок, то ставим 1, иначе 0
selector - селектор CSS для таблицы который нужно сортировать, именно для тега
table
numrow - номер столбца по которому будет сортировка в таблице, начинается отсчет с 0
dtype - тип данных в столбце. если цифры, то ставим
'num'
, если текст, то
'text'
Для примера:
https://codepen.io/Dr_Elvis/pen/KKQmWKp