@Boria321

Как отсортировать данные в динамически созданной таблице?

У меня есть динамически созданная таблица, которую я заполнил данными из массива объектов. Мне нужно чтобы при клике на кнопку вызывалась функция сортирующая данные и перезапишет в столбец их. Как такое реализовать? Или возможно есть лучший способ отсортировать данные в столбце.
const sortButton = document.querySelector(".sort_btn");
  const sortname = document.querySelector("#name");
  sortButton.onclick = function (e) {
    let targetItem = e.target;
    for (let i of arr) {
      if (targetItem.closest("#sort_name")) {
        Sorting(arr, "name", 1);
        sortname.innerHTML = `<td id="full_name">${i.full_name}</td>`;
      }
    }
  };
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
Dr_Elvis
@Dr_Elvis
В гугле забанен
Я использую вот такой скрипт для сортировки таблицы
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
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы