Как организовать кнопки сортировки, как на картинке
Всем привет, что-то не пойму как лучше сверстать и сделать кликабельными кнопки сортировки, как на данном скриншоте. Namе и Percentagе получаются связанными радио баттонами, то есть можно выбрать что-то одно — либо Name , либо Percentage .
Отслеживать
1,783 13 13 серебряных знаков 19 19 бронзовых знаков
задан 20 окт 2016 в 15:56
user3319778 user3319778
307 5 5 серебряных знаков 12 12 бронзовых знаков
У Вас уже есть какой-нибудь код для наглядности?
20 окт 2016 в 16:04
мне б в целом идею подсказать я бы сам написал просто пока не очень понимаю как правильно сделать, я так понимаю это через радио батон делается при этом его стилизовать нужно и повесить событие которое будет срабатывать на onSelected — вроде так?
20 окт 2016 в 16:06
Не обязательно радио. Вам же нужно сортировать в обе стороны — по возрастанию и убыванию, а как Вы с радио это сделаете, если он УЖЕ selected?
20 окт 2016 в 16:08
20 окт 2016 в 16:26
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Треугольники можно сделать с помощью css. Хранить состояние с помощью checkbox (еще можно зарегистрировать для него событие, чтобы отлавливать нажатие). Для добавления стрелок использовать :before и :after псевдоклассы. Привязать нажатие на стрелочки можно, применив псевдоклассы к ‘label’, который ссылается на checkbox по id .
В этом варианте можно обойтись без скриптов для переключения состояния стрелочек, однако, мне потребовалось два дополнительных псевдокласса для переключения.
Возможно, вам подойдет этот вариант.
$('#stateInput').change(function() < console.log('This value is now: ' + $(this).prop('checked')); >)div < font-size: 20px; >.arrows < position: relative; cursor: pointer; >#stateInput < display: none; >#stateInput + .arrows:after < content: ' '; position: absolute; left: 10px; bottom: -16px; border: 10px solid transparent; border-top: 10px solid green; border-width: 12px 7px; >#stateInput:checked + .arrows:after < content: ' '; position: absolute; left: 10px; bottom: -16px; border: 10px solid transparent; border-top: 10px solid gray; border-width: 12px 7px; >#stateInput + .arrows:before < content: ' '; position: absolute; left: 10px; bottom: 12px; border: 10px solid transparent; border-bottom: 10px solid gray; border-width: 12px 7px; >#stateInput:checked + .arrows:before
Some text Добавлено
Cо стилизацией под кнопку
$('#stateInput').change(function() < console.log('This value is now: ' + $(this).prop('checked')); >).button < position: relative; font-size: 20px; text-decoration: none; display: inline-block; border: 1px solid green; color: green; >.button:active < color: gray; background: #eee; >.button > .arrows < position: relative; cursor: pointer; display: block; padding: 8px 10px; padding-right: 30px; >.button > input < display: none; >#stateInput + .arrows:after, #stateInput + .arrows:before < content: ' '; position: absolute; right: 10px; border: 10px solid transparent; >#stateInput + .arrows:after < bottom: -6px; border-top: 10px solid green; border-width: 12px 7px; >#stateInput + .arrows:before < top: -6px; border-bottom: 10px solid gray; border-width: 12px 7px; >#stateInput:checked + .arrows:before < border-bottom-color: green; >#stateInput:checked + .arrows:after
Сортировка данных таблицы
При помощи данного скрипта можно производить сортировку данных таблицы (в столбце) на веб-странице, без перезагрузки страницы и серверных обработок. Полностью клиентский скрипт. Скачайте архивный файл ZIP, распакуйте его и поместите содержимое распакованной папки в ту же папку, где размещается ваша веб-страница.
Внимание! Изменение кода скрипта может повлечь его неработоспособность!
Скопируйте приведённый ниже на странице код и вставьте перед кодом таблицы на веб-странице (обычно между
и , хотя можно и между и — но только ПЕРЕД таблицей с данными).Подключение внешнего скрипта
Также нужны две картинки (изображения) в виде стрелок, которые бы указывали на тип проведенной сортировки конкретного столбца — файл «arrowdown.gif» (картинка сортировки вниз) и файл «arrowup.gif» (картинка сортировки вверх). Образцы картинок в папке «img» прилагаются в архиве и могут быть заменены Вами на любые другие с сохранением имени файла и папки.
В список классов стилей обязательно добавьте описания, параметры которых (цвет, шрифт и отступы) можно редактировать (но их названия редактировать нельзя!):
Код таблицы стилей:
/* Код таблицы стилей */
table.sort border-spacing:0.1em;
margin-bottom:1em;
margin-top:1em
>
/* ячейки таблицы */
table.sort td border:1px solid #ccc;
padding:0.3em 1em
>
/* заголовки таблицы */
table.sort thead td cursor:pointer;
cursor:hand;
font-weight:bold;
text-align:center;
vertical-align:middle
>
/* заголовок отсортированного столбца */
table.sort thead td.curcol background-color:#999;
color:#fff
>
Так должна выглядеть сортируемая таблица. Здесь налагаются очень жесткие требования по правильности её оформления. Все дополнительные команды, открывающие и закрывающие теги должны присутствовать. Необходимо указать теги (шапка таблицы) и (основная часть таблицы). Обычно их мало кто использует, но здесь эти теги обязательны! Шапка таблицы также обязательна в указанной форме.
Можно добавлять элементы оформления, но ставить все закрывающие теги в правильной последовательности. Обратите ОСОБОЕ внимание на код сортируемой таблицы, который можно редактировать в деталях. Внимание: регистр букв имеет значение и стили заголовков можно редактировать только через список стилей, иначе скрипт не будет работать.
Код таблицы с данными
| Имя поля 1 | Имя поля 2 | Имя поля 3 | Имя поля 4 | Имя поля 5 |
Результат:
Нажмите на шапку любого столбца, и он будет отсортирован.
| Имя поля 1 | Имя поля 2 | Имя поля 3 | Имя поля 4 | Имя поля 5 |
| Кузьменко Иван Кузьмич | студент ХПИ | Білокуракинський портал | 1984 г. рожд. | мужск. |
| Зеленский Владимир Александрович | безработный | president.gov.ua | 1978 г. рожд. | мужск. |
| Сидоров Сидор Сидорович | безработный | Microsoft.com | 1899 г. рожд. | мужск. |
| Александрова Александра Александровна | ребенок | нет сайта | 2020 г. рожд. | женск. |
| Шимпанзе Путинка | обезьяна | зоопарк | 1950 г. рожд. | ХЛО |
Javascript сортировка товаров по цене
Подскажите как реализовать сортировку по цене. Выбираю по ClassName .appartments-item__price’. Получаю массив. Сортировать методом sort . Тут уже выдает ошибку что unexpected token < на строке prices.sort(a, b). А как потом сослаться на .appartments-item , чтобы карточки выстроились по новому? Это же тоже надо учитывать при сортировке?
document.querySelector('.sorting__price').onclick = function() < let prices = document.getElementsByClassName('.appartments-item__price'); prices.sort(a, b) < if (a >b) return -1; if (a < b) return 1; if (a == b) return 0; >; >; Студия №44 5 000 000 руб
Однокомнатная №666 16 000 000 руб
Отслеживать
14.6k 6 6 золотых знаков 36 36 серебряных знаков 71 71 бронзовый знак
задан 8 ноя 2018 в 20:02
Dave Garrow Dave Garrow
139 1 1 серебряный знак 9 9 бронзовых знаков
Даже и приблизительно не должно работать
8 ноя 2018 в 23:28
Тег на странице может быть только в единственном экземпляре. Так же как теги ,
9 ноя 2018 в 5:53
@Air это не так. Footer также можно вкладывать в section и в atricle
9 ноя 2018 в 7:06
Ну-Ну. можно так можно.
9 ноя 2018 в 13:52
@Air почему нельзя? Если в документации сказано, что можно, то почему нет? Если вы думайте, что теги footer и header сделали чтобы верх и них страницы обрамлять, то вы ошибаетесь.
9 ноя 2018 в 14:38
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
document.querySelector('.sorting__price').addEventListener("click", () => < const elements = document.querySelectorAll('.appartments-item'); const sorted = [. elements].sort((a, b) => < const priceElA = a.querySelector(".appartments-item__price"); const priceElB = b.querySelector(".appartments-item__price"); const getPrice = (el) =>parseInt(el.innerHTML.replace(/ /g, "")); return getPrice(priceElA) - getPrice(priceElB); >); const resultEl = document.querySelector(".results-container"); resultEl.innerHTML = null; sorted.forEach(el => resultEl.appendChild(el)); >);.results-container
Однокомнатная №666 16 000 000 руб
Студия №44 5 000 000 руб
Если игнорировать семантику HTML с несколькими обернутыми в , то чисто JS должен быть примерно таким:
- Event listeners лучше всего добавлять с помощью addEventListener , так как при этом Вы не удаляете остальные listeners, как в случае el.onclick = func
- Если взялись использовать querySelector , то используйте его везде и не смешивайте с getElement методами без лишней необходимости. Разницы (почти) никакой, вопрос в читабельности.
- Когда Вы получаете елементы после выборки, они не являются массивом, а являются HTMLCollection, следовательно не имеют методов массивов, таких как: forEach , map , sort , etc. Чтобы добавить их, достаточно использовать деструктуризацию [. elements] .
- Как правильно заметил @dev_null — sort принимает один аргумент, функцию, определяющую порядок сортировки., поэтому читайте документацию.
Поиск, сортировка и фильтры для списков в HTML
Простой мини-скрипт List.js размером 7 КБ добавляет интерактивности маркированным спискам в HTML. С помощью скрипта можно сделать удобный поиск, сортировку, редактирование списка с добавлением или удалением новых элементов (например, адресная книга на странице) и т.д. Чем-то напоминает Chosen, только там модифицировались выпадающие списки.
List.js — обычный JavaScript, который не требует jQuery, работает без проблем во всех браузерах. Пару примеров см. здесь и здесь.
List.js опубликован под открытой лицензией MIT.
Например, вот функция создания нового списка на веб-странице по нажатию кнопки пользователем.
var options = < item: 'hacker-item' >; var values = [ < name: 'Jonny', city:'Stockholm' >, < name: 'Jonas', city:'Berlin' >]; var hackerList = new List('hacker-list', options, values);Кнопки для поиска и сортировки в списке.
var options = < valueNames: [ 'name', 'city' ] >; var hackerList = new List('hacker-list', options);