Таблицы: красиво и удобно.
30 июня 2009Что-то давно я не писал ничего, исправляюсь. Эта запись будет скорее в стиле «чтобы самому не забыть». Когда-то давно один читатель меня просил сделать произвольную сортировку в таблице, которая рисуется средствами PHP. Бегло просмотрев функции работы с массивами, я понял, что определённо должен быть способ проще. Так и вышло ©.
Вместо того чтобы наворачивать запросы и обработки на PHP можно использовать небольшой JS-скрипт, который перехватит таблицу уже в браузере посетителя и его же силами отсортирует её как угодно.
Поиск такого скрипта (а зачем писать если можно найти?) показал, что их десятки, и многие по навороченности напоминают центр управления космическими полётами, например – соответствующие плагины Tablesorter для JQuery, Phatfusion sortable и Mootable sorting для mootools, Datatables для YUI и TableKit для Prototype.
Думаю, их довольно просто прикрутить и приручить, если один из этих тулкитов в вашем проекте используется. В моём случае так не вышло, а грузить лишний код не хотелось.
Я выбрал два маленьких скрипта, не требующих ничего ни от сайта (нужно подключить один JS-файл), ни от вёрстки (нужно просто задать CSS-класс для заголовков таблицы).
 |
 |
| Unobtrusive Table Sort | Standartista |
1. Unobtrusive table sort — это мой выбор, я использовал его в выводе результатов работы скрипта для проверки тИЦ и PR.
Этот скрипт умеет сортировать цифры, строки, правильно сортировать даты, размеры файлов и прочее, подсвечивать чётные строки таблиц цветом, а так же делить содержимое больших таблиц на страницы.
Очень легко подключается, и может работать даже без дополнительной CSS-обёртки. Хотя, стоит отметить, с ней он выглядит довольно симпатично.
2. Standartista — очень похожий скрипт, но со своими особенностями. Он умеет сортировать IP-адреса, валюты, числа, текст и даты, а главная его фишка в том, что он сам умеет эти типы данных угадывать, не требуя пояснений.
Использую http://developer.yahoo.com/yui/datatable/
В целом стараюсь использовать скрипты из этой библиотеки.
Я YUI в одном проекте использовал (ITNation), мне показалось, что кроссбраузерность у этой штуки – не самая сильная сторона =)
@Жилинcкий Владимир. Публичных проектов с необходимостью использовать такие таблицы у меня не было, использовал для внутренних нужд,а там 200% пользователей на FF.
А, ну так то конечно. У меня там с ИЕ6 какая-то беда была, кажется.
О, как раз скоро понадобится нечто подобное. Приятно, когда за тебя кто-то добрый уже отфильтровал шлак. Спасибо!
Естетсвенно как минус – обязательна поддержка JS
Естественно. Но радует то, что таблица остаётся таблицей: с отключенным JS исчезает только сортировка, но не таблица.
ИМХО, от того, кто по своей воле JS выключил, глупо принимать претензии. Сугубо ИМХО.
Первая выглядит очень даже ничего, но помоему это не очень серьёзно. Обычно данных значительно больше 100 рядов, всё это показывать надо достаточно динамически, я в своё время тоже пытался подобный компонент делать, проблема лишь в том что универсальный инструмент с постраничной навигацией, многоколончатой сортировкой (тут он на удивление есть), фильтрацией и такими фичами как массовое удаление или быстрое добавление – будет слишком громоздким. И полюбому сортировать большие объёмы надо на стороне сервера. Ну а поиграться, конечно приятная штука.
Оформление – это оформление, style.css :-)
А вопрос где обрабатывать должен решаться как-то отдельно и в зависимости от типа и объёма данных, нагрузки на клиент и сервер и прочих факторов.
Сортировать сайты по пузомеркам – идеально :-)
Что-то у меня не получается подружиться с JS, так в принципе все понятно, но постоянно скрипты не работают)
Если мне не изменяет память, главным недостатком такой сортировки является неработоспособность при постраничном выводе таблицы )
Скачал, сейчас пытаюсь разобраться.
щаслив от http://htmlcoder.visions.ru/JavaScript/?22