Сортировка таблиц на веб-странице может значительно улучшить пользовательский опыт, позволяя пользователям быстро находить нужные данные. В этой статье мы рассмотрим, как добавить сортировку таблиц с помощью HTML и JavaScript.

Давайте начнем с создания базовой таблицы на HTML. Вот пример простой таблицы, состоящей из трех столбцов:

<table id="myTable" border="1">
  <tr>
    <th onclick="sortTable(0)">Имя</th>
    <th onclick="sortTable(1)">Возраст</th>
    <th onclick="sortTable(2)">Город</th>
  </tr>
  <tr>
    <td>Анна</td>
    <td>28</td>
    <td>Москва</td>
  </tr>
  <tr>
    <td>Сергей</td>
    <td>35</td>
    <td>Санкт-Петербург</td>
  </tr>
  <tr>
    <td>Ирина</td>
    <td>22</td>
    <td>Казань</td>
  </tr>
</table>

В этом примере мы создали таблицу с заголовками Имя, Возраст и Город. Обратите внимание, что мы добавили атрибут onclick в заголовки столбцов, который вызывает функцию sortTable с индексом столбца в качестве аргумента.

Теперь давайте добавим функцию sortTable на JavaScript. Эта функция будет выполнять сортировку по нажатию на заголовок столбца:

<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc"; // Устанавливаем направление сортировки по умолчанию: по возрастанию

  // Продолжаем сортировку, пока switching равно true
  while (switching) {
    switching = false;
    rows = table.rows;

    // Проходим по всем строкам таблицы (кроме первой строки)
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false; // Устанавливаем значение по умолчанию
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];

      // Сравниваем две строки в зависимости от направления сортировки
      if (dir == "asc") {
        if (x.innerHTML > y.innerHTML) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML < y.innerHTML) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      // Если строка должна быть изменена, меняем её местами
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++; // Увеличиваем счётчик
    } else {
      // Если не было изменений, меняем направление сортировки
      if (dir == "asc") {
        dir = "desc";
      } else {
        dir = "asc";
      }
    }
  }
}
</script>

Функция sortTable сначала получает таблицу и устанавливает значение switching в true, чтобы начать цикл сортировки. Затем она проходит по всем строкам таблицы, сравнивает значения в ячейках столбца, указанного пользователем, и меняет их местами, если это необходимо.

Теперь, когда мы добавили функцию сортировки, давайте протестируем нашу таблицу. Когда вы кликнете на заголовок столбца, таблица будет сортироваться по соответствующему полю. Вы можете попробовать кликнуть на заголовки Имя, Возраст и Город, чтобы увидеть, как данные сортируются.

Вы можете также улучшить функциональность, добавив индикаторы сортировки, например, стрелки, которые будут показывать текущее направление сортировки. Для этого можно использовать CSS и немного изменить JavaScript, чтобы обновлять отображение стрелок в зависимости от направления сортировки.

В заключение, добавление сортировки таблиц с помощью HTML и JavaScript — это полезный навык, который позволит улучшить взаимодействие пользователей с вашим веб-приложением. Вы можете расширить функциональность, добавив поддержку сортировки по нескольким столбцам, фильтрацию данных и другие функции.