Сортировка jQuery — таблицы и блоки

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

Задача состоит в том, чтобы сортировать  в алфавитном порядке, либо по числам, в обоих направлениях — по убыванию и возрастанию. При этом необходимо, чтобы код корректно работал во всех браузерах, включая Internet Explorer и . Предполагается, что будет использоваться не чистый JavaScript, а именно  .

HTML — скелет

Для реализации примера взяты элементы таблицы Менделеева, где есть буквенное обозначение элемента и его порядковый номер.

Сортируемая таблица строится с помощью блочной верстки.

Элемент с классом header будет являться заголовком таблицы, в которой будут располагаться элементы управления сортировкой. Элементы управления определяются наличием атрибута data-orderby. В данном случае в качестве элемента управления указан блок всей ячейки, для того, чтобы сортировка происходила при щелчке на всем блоке, а не только на слове.

Далее идет блок с классом list, что дает возможность определить контейнер, в котором будут сортироваться блоки. Блоки, которые будут в последствии сортироваться имеют класс row.

Текст, по которому будет определяться порядок сортировки определяется наличием атрибута data-name, и значение этого атрибута должно совпадать со значением управляющего элемента. То есть при щелчке на элементе [data-orderby=element] должна производиться сортировка по элементам [data-name=element].

CSS — определение внешнего вида таблицы и элементов сортировки

Чтобы визуально таблица выглядела хорошо, перед тем, как будет осуществлена сортировка jQuery, следует написать следующий CSS код, при условии, что не используется Bootstrap:



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



JavaScript — функционал, сортировка jQuery

Для корректной работы в необходимо правильно создать массив, так как довольно часто при создании массива другим способом данный массив не работает в . Поэтому мы применяем способ new Array().

Необходимо создать глобальную переменную orderdirection, которая будет являться массивом и будет хранить текущее направление сортировки для каждого столбца.

Для вызова функции сортировки jQuery необходимо создать обработчик события, например щелчка мыши по управляющему элементу. В обработчике следует вызвать функцию, которая будет иметь входные данные: ключ сортировки, контейнер блоков, блок, флаг, указывающий на то, что данные следует сортировать как числа.



Если сортировать числа в алфавитном порядке, то последовательность числе 6,47,4 будет отсортирована как 4, 47, 6, а не как 4, 6, 47.

Чтобы указать на то, что данные следует сортировать как числа, нужно эти данные сделать не строковыми, а числовыми. Для этого используется функция parseFloat, которая преобразует строку в число с плавающей точкой, так как вероятно, что сортировке будут подвергаться не только целые числа.



Теперь для осуществления сортировки необходимо написать функцию самой сортировки. Для обеспечения корректной работы в браузере Safari необходимо правильно написать условие перестановки, с указанием возвращаемого числа: 1, -1, 0.



Посмотрите пример работы или исходный, кликнув на соответствующую кнопку:

"Сортировка jQuery — таблицы и блоки"

Вам будет интересно...

Добавить комментарий