Как сделать сортировку в таблице html
Добавил пользователь Morpheus Обновлено: 04.10.2024
Таблицы с сортировкой позволяют упорядочивать данные по столбцам в порядке возрастания или убывания. Чтобы добавить кнопки сортировки, в режиме исходного кода присвойте таблице class="sortable" .
В настоящий момент сортировка не работает в мобильном скине. Если вы хотите отсортировать данные по нескольким столбцам таблице, кликайте по колонкам, нажав клавишу Shift.
Содержание
Основы
Чтобы сделать таблицу сортируемой, достаточно присвоить ей класс "sortable" или дописать этот класс через пробел к уже указанному. В этом случае все столбцы таблицы можно будет упорядочить.
| Имя | Фамилия | Любимый цвет |
|---|---|---|
| Антон | Иванов | Коричневый |
| Анатолий | Петров | Зелёный |
| Алексей | Сидоров | Бордовый |
Параметры сортировки
data-sort-type
По умолчанию данные в столбцах сортируются по таблице ASCII. Это не проблема в большинстве случаев, но есть и исключения. К примеру, числа будут упорядочены не по численному значению, а по порядковому номеру символа (числа 10, 20 и 100 будут упорядочены как 10, 100, 20). Эта проблема легко решается присвоением отдельного класса сортируемых данных главной ячейке столбца.
data-sort-type=". " может иметь различные значения, ниже перечислены самые распространённые из них:
Нужно заметить, что если хотя бы одно значение не подходит под указанный тип, то вся колонка будет отсортирована по таблице ASCII.
В результате получаем различную сортировку в зависимости от типа данных:
data-sort-value
Иногда записанное значение в колонке не соответствует тому, как оно должно быть упорядочено. В этом случае можно использовать код data-sort-value="…" .
| Консоль | Цвет | Количество |
|---|---|---|
| Dreamcast | Белый | Пять |
| iPad | Белый | Ноль |
| Xbox | Зелёный | Восемь |
Колонки, которым не требуется сортировка
Если в таблице есть колонка, значения в которой не нужно сортировать, добавьте в заголовке столбца class="unsortable" .
| Игра | Тема | Рейтинг |
|---|---|---|
| Pocket League Story | футбол | ☆☆ |
| Game Dev Story | симулятор | ☆☆☆ |
| Grand Prix Story | машины | ☆ |
Нижняя строчка таблицы
Если в вашей таблице есть нижняя строка, которая содержит вывод, среднее значение или по какой-то другой причине не должна участвовать в сортировке, добавьте к этой строке класс class="sortbottom" .
Узнать, как создать сортированную таблицу HTML с помощью JavaScript.
Сортировать
| Имя | Страна |
|---|---|
| Berglunds snabbkop | Швеция |
| North/South | Великобритания |
| Alfreds Futterkiste | Германия |
| Koniglich Essen | Германия |
| Magazzini Alimentari Riuniti | Италия |
| Париж specialites | Франция |
| Island Trading | Великобритания |
| Laughing Bacchus Winecellars | Канада |
Создание функции сортировки
Пример
function sortTable() <
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById("myTable");
switching = true;
/* Сделайте цикл, который будет продолжаться до тех пор, пока
никакого переключения не было сделано: */
while (switching) <
// Начните с того: переключение не выполняется:
switching = false;
rows = table.rows;
/* Цикл через все строки таблицы (за исключением
во-первых, который содержит заголовки таблиц): */
for (i = 1; i y.innerHTML.toLowerCase()) <
// Если это так, отметьте как переключатель и разорвать цикл:
shouldSwitch = true;
break;
>
>
if (shouldSwitch) <
/* Если переключатель был отмечен, сделайте переключатель
и отметьте, что переключатель был сделан: */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
>
>
>
Сортировка таблицы по заголовкам
Щелкните заголовки, чтобы отсортировать таблицу.
Нажмите "Имя", чтобы отсортировать по имени "Страна", чтобы отсортировать по странам.
Списки и таблицы часто являются лучшим способом отображения данных в Интернете; но вам не придется беспокоиться о том, чтобы сортировать эту информацию вручную. В сегодняшнем учебнике мы будем создавать плагин jQuery, который поместит всех ваших уток подряд с легкостью JavaScript!
Предисловие
Очевидно, что это вернет 0, если числа равны, отрицательное число, если a должно быть первым, и положительное число, если b должно быть первым.
Мы рассмотрим сортировку нескольких разных типов данных, в нескольких форматах; но все это будет намного полезнее, если мы обернем ее в плагин jQuery, так что начнем с создания этой оболочки!
Плагин-оболочка
Мы создадим наш плагин, называемый datasort, таким образом: мы передадим ему массив элементов для сортировки; мы можем указать четыре параметра.
- datatype (тип данных, которые вы сортируете)
- sortElement (дочерний элемент, который вы хотите сортировать по желанию)
- sortAttr (атрибут, который вы хотите сортировать, по желанию)
- reverse (направление, в котором они должны сортироваться)
Таким образом, полностью модифицированный вызов к нашему плагину может выглядеть следующим образом:
Вот оболочка плагина:
Итак, вот как это будет работать: мы будем устанавливать все переменные в начале. Затем, если параметр datatype является строкой, мы найдем соответствующую функцию сортировки в объекте datatypes и отсортируем его; если параметр datatype является функцией, мы будем сортировать ей. Наконец, если для параметра reverse установлено значение true, мы изменим порядок отсортированных элементов (поскольку объекты jQuery не являются истинными массивами JavaScript, функция reverse не будет работать на них, поэтому мы можем использовать $.makeArray( ), чтобы превратить одно в другое, а затем, как только все будет в обратном порядке, мы снова обернем это в jQuery!).
Немного черновой работы
На самом низком уровне вы можете сортировать практически любые типы данных одним из двух способов: в алфавитном порядке и численно. Давайте создадим эти две функции как свойства вашего базового объекта.
При сортировке элементов в массиве мы, возможно, не хотим сортировать просто по тексту самого элемента. Для этого используются параметры sortElement и sortAttr нашего плагина. Например, мы, скорее всего, захотим отсортировать строки таблицы на основе определенного столбца ячеек таблицы. В этом случае мы будем использовать $('table tr').datasort(). Или, возможно, мы хотим отсортировать список изображений по их атрибутам alt: $('ul li').datasort(). Для всего этого нам нужно добавить еще одну функцию к нашему базовому объекту:
Вероятно, это было похоже на большую подготовительную работу, но то, что мы действительно делали, - это абстрагирование как можно большего количества кода. Таким образом, будет намного меньше дублирования, потому что важные действия были объединены как функции.
Сортировка слов и чисел
Мы наконец здесь: интересная часть! Мы начнем с создания двух простых функций для нашего объекта datatypes. Они будут просто передавать значения в base.extract(), а затем передавать эти возвращаемые значения в соответствующий класс сортировки.
Наш алфавитный сортировщик должен быть очевиден. Сортировщик чисел делает немного больше: перед передачей извлеченных значений он вырезает знак доллара спереди. Я сохранил это регулярное выражение простым, но вы могли бы разобрать много разных форматов здесь, если бы хотели получить что-то более сложное. Давайте уже опробуем наш плагин; создайте базовую страницу html:
Довольно приятно, но это были относительно простые ценности; что, если мы хотим иметь возможность сортировать несколько форматов для одного типа?
Сортировка дат
Существует множество способов записи дат, что делает их довольно сложными для анализа для сортировки. Однако мы можем охватить большинство из них следующим образом:
Итак, что мы здесь делаем? Во-первых, вот логика: если все даты отформатированы YYYYMMDD, они будут корректно сортироваться с численной сортировкой. Наш парсер может сортировать следующие форматы даты:
- YYYY-MM-DD
- YYYYMMDD
- DD/MM/YYYY
- month DD, YYYY
Сначала мы вырезаем тире, что делает YYYY-MM-DD готовыми к парсингу. Затем мы заменяем имя месяца или аббревиатуру на его числовое значение. Наконец, мы должны переместить числа для DD/MM/YYYY и month DD, YYYY. Вот что делают последние два выражения. Чтобы попробовать, вставьте этот список в наш HTML:
И вызовите это следующим образом:
Является ли это идеальным парсером даты? Ни в коем случае; мы не можем сортировать DD/MM/YY, потому что нет способа узнать, в каком веке это происходит. Кроме того, мы не можем отличить DD/MM/YY и MM/DD/YY, поэтому нам просто нужно выбрать один.
Сортировка времени
Сортировка значений времени должна быть одним из самых сложных заданий для сортировки: мы должны иметь возможность принимать 12-часовое время, 24-часовое время и значения с или без тегов AM/PM и секунды. Я думаю, что проще отсортировать время по алфавиту, хотя оно и содержит только числа. Почему? Рассмотрим эти две временные метки: 00:15:37 и 12:15. Первый должен быть первым, но если мы отсортируем их по номеру, они будут проанализированы как плавающие, и в итоге появятся 1537 и 1215. Теперь второе значение будет первым. Кроме того, при сортировке в алфавитном порядке нам не нужно вынимать двоеточия (parseFloat() уберет их). Итак, вот как это делается.
Давайте рассмотрим это по строкам.
Начнем с наших переменных: извлеченных значений и регулярного выражения для проверки метки PM.
В этом последнем фрагменте мы проверяем значение часа для двух условий: оно меньше 10? и имеет ли строка только один символ? Это важно, потому что значение типа 08 будет анализироваться как 8 и быть меньше 10; но мы пытаемся увидеть, нужно ли нам добавить ноль к началу. Если строка имеет только один символ, то мы добавляем нуль, поэтому 3 становится 03. Это будет приводить числа в порядок!
Перед присоединением к массиву мы удалим любые метки AM. Так что теперь это.
. можно сортировать с этим.
И готово! Вот плоды нашего труда:
Дополнительные случайные значения
Это использует простейшие регулярные выражения для сортировки списка:
Теперь вы знаете: сортировка значений в JavaScript действительно не так сложна, как вы могли бы подумать. Вы можете представить, что это полезно для сортировки таблицы с чем-то вроде этого:
(Попробуйте заменить код jQuery для таблицы в первом примере этим!)
Конечно, мы могли бы улучшить этот плагин; например, мы могли бы проверить его атрибут rel atttribute для типа данных, если он не указан как параметр, и использовать по умолчанию alpha, если нет rel . Но это уже не относится к сортировке.
В общем, для сортировки с JavaScript мы выполняем следующие шаги:
- Определите различные форматы, которые вы хотите сортировать.
- Определите, в каком формате вы хотите сортировать.
- Сортируйте массив элементов с методом sort(), передавая функцию, которая преобразует два элемента в желаемый формат, прежде чем сравнивать их
Есть ли еще какой тип данных для добавления в наш плагин? Есть лучший способ сортировки? Давайте обсуждать это в комментариях!
От автора: Очень часто на веб-страницах необходимо отображать данные при помощи таблиц. Таблица очень удобное средство для представления огромного количества данных, относящихся к определенной тематике. Но если в одной таблице отображается около сотни строк а то и больше, это значительно усложняет поиск нужной информации. Поэтому в данном уроке мы с Вами рассмотрим удобный и простой плагин для библиотеки jquery, который позволяет организовать сортировку таблиц по ее полям.
Установка плагина
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Затем кликаем по ссылке Download:
И скачиваем архив с библиотекой – ссылка jquery.tablesorter.zip. Для данного урока я подготовил следующую страницу:
Таблица сохранена в базе данных и при помощи несложного скрипта, отображается на экране (в исходных материалах к уроку Вы сможете ознакомиться с данным скриптом).
Первым делом подключаем библиотеку jQuery, затем из скачанного архива, нам необходимо подключить плагин jquery.tablesorter.js, плагин постраничной навигации для таблиц jquery.tablesorter.pager.js, пустой файл script.js, в котором мы будем кодировать на языке JavaScript, а так же файл стилей из папки theme.
Далее в фале script.js, добавим следующий код:
То есть, выбираем блок с таблицей и вызываем метод tablesorter(). Теперь обновив информацию в браузере, мы увидим, что появилась возможность сортировки таблиц.
Настройки плагина
Плагин поддерживает следующие настройки:
sortList – сортировка полей по умолчанию, задается в виде массива, следующего вида [x,n], где x – индекс поля (индексация полей начинается с нуля), n – направление сортировки (0 прямое направление, 1 — обратное). Можно указать несколько ячеек [x,n], при этом будет выбрана сортировка, по умолчанию по нескольким полям;
sortForce – принудительная сортировка. Какое бы поле не выбрал пользователь для сортировки, выбранное в этом параметре поле, всегда будет участвовать в сортировке;
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
widgets – каждая не четная строка, закрашивается в определенный цвет;
cancelSelection – если true, запрещает выделение текста в шапке таблицы;
debug – режим отладки;
headers – используя данное свойство, можно запретить сортировку по выбранным полям таблицы.
Постраничная навигация
Весь контент таблицы, моно разбить на несколько страниц, тем самым улучшить удобство пользования ею. Для этого добавим следующий HTML блок, который будет использоваться как панель управления страницами постраничной навигации:
Читайте также: