Ползунок JQuery UI и кнопки для настройки списка или таблицы - Какой путь?

Question

История

У меня есть список товаров. Я хочу иметь возможность сортировать их по цене, бренду и магазину. Все продукты в div. Я могу положить их в таблицу, если это будет лучше. Чего я хочу добиться, так это того, что я могу отсортировать этот список с помощью ползунка пользовательского интерфейса Jquery и кнопок. Я хочу, чтобы посетители могли использовать ползунок для выбора определенного ценового диапазона. Я хочу, чтобы все бренды и магазины были «отобраны». Посетители могут отменить выбор бренда и / или магазина. Я бы хотел, чтобы все это изменилось вживую на странице.

Вопрос:

Теперь мой вопрос: каков наилучший способ получить этот результат? Поскольку я относительно новичок в Jquery и javascript в целом, я мог бы воспользоваться некоторыми советами.

То, как я думал об этом, давало каждому продукту упаковочные атрибуты div, такие как: цена = "100" brand = "samsung" и т. Д. Затем, используя Jquery, чтобы скрыть / показать элементы div в определенных критериях?

Это правильный путь для достижения этого?

Answer 1

Ну, тут есть несколько аспектов:

1. Использование ajax для получения списка продуктов по критериям, указанным пользователем
2. Сортировка этой информации при нажатии на столбцы

Для 1. это действительно зависит от вашего приложения, передав критерий, т.е. search.php со значениями post и получая обратно новую таблицу HTML. Вы можете использовать .serialize() для простой передачи значений формы в ваш бэкэнд PHP

Для 2. Существует плагин jQGrid для jQuery, который очень популярен, хотя, возможно, немного тяжеловесен с его множеством функций - http://www.trirand.com/blog/ конечно, есть много других хороших доступных опций:

• 12 Полезных плагинов jQuery для работы с таблицами
• Улучшение таблиц с использованием одного из 30 функциональных плагинов jQuery

Лично я бы преобразовал вашу информацию в таблицы. Я знаю, говоря, что меня, вероятно, остановит полиция DIV, но мы говорим о табличной информации, то есть информации, которая содержится в таблице. Также большинство плагинов jQuery работают с учетом сортировки таблиц.