Таблицы: красиво и удобно.

30 Июн 2009

Что-то давно я не писал ничего, исправляюсь. Эта запись будет скорее в стиле «чтобы самому не забыть». Когда-то давно один читатель меня просил сделать произвольную сортировку в таблице, которая рисуется средствами PHP. Бегло просмотрев функции работы с массивами, я понял, что определённо должен быть способ проще. Так и вышло ©.

Вместо того чтобы наворачивать запросы и обработки на PHP можно использовать небольшой JS-скрипт, который перехватит таблицу уже в браузере посетителя и его же силами отсортирует её как угодно.

Поиск такого скрипта (а зачем писать если можно найти?) показал, что их десятки, и многие по навороченности напоминают центр управления космическими полётами, например – соответствующие плагины Tablesorter для JQuery, Phatfusion sortable и Mootable sorting для mootools, Datatables для YUI и TableKit для Prototype.

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

Я выбрал два маленьких скрипта, не требующих ничего ни от сайта (нужно подключить один JS-файл), ни от вёрстки (нужно просто задать CSS-класс для заголовков таблицы).

Unobtrusive Table Sort Standartista
Unobtrusive Table Sort Standartista


1. Unobtrusive table sort — это мой выбор, я использовал его в выводе результатов работы скрипта для проверки тИЦ и PR.

Этот скрипт умеет сортировать цифры, строки, правильно сортировать даты, размеры файлов и прочее, подсвечивать чётные строки таблиц цветом, а так же делить содержимое больших таблиц на страницы.

Очень легко подключается, и может работать даже без дополнительной CSS-обёртки. Хотя, стоит отметить, с ней он выглядит довольно симпатично.

2. Standartista — очень похожий скрипт, но со своими особенностями. Он умеет сортировать IP-адреса, валюты, числа, текст и даты, а главная его фишка в том, что он сам умеет эти типы данных угадывать, не требуя пояснений.

Жилинский Владимир.






 

madbirdy     .

Написано 30 июня 2009 года в 11:33


Использую http://developer.yahoo.com/yui/datatable/
В целом стараюсь использовать скрипты из этой библиотеки.

 

Жилинcкий Владимир     .

Написано 30 июня 2009 года в 11:57


Я YUI в одном проекте использовал (ITNation), мне показалось, что кроссбраузерность у этой штуки – не самая сильная сторона =)

 

madbirdy     .

Написано 30 июня 2009 года в 12:02


@Жилинcкий Владимир. Публичных проектов с необходимостью использовать такие таблицы у меня не было, использовал для внутренних нужд,а там 200% пользователей на FF.

 

Жилинcкий Владимир     .

Написано 30 июня 2009 года в 12:03


А, ну так то конечно. У меня там с ИЕ6 какая-то беда была, кажется.

 

Тормоз     .

Написано 1 июля 2009 года в 05:55


О, как раз скоро понадобится нечто подобное. Приятно, когда за тебя кто-то добрый уже отфильтровал шлак. Спасибо!

 

Артём Курапов     .

Написано 1 июля 2009 года в 10:27


Естетсвенно как минус – обязательна поддержка JS

 

Жилинcкий Владимир     .

Написано 1 июля 2009 года в 10:32


Естественно. Но радует то, что таблица остаётся таблицей: с отключенным JS исчезает только сортировка, но не таблица.

ИМХО, от того, кто по своей воле JS выключил, глупо принимать претензии. Сугубо ИМХО.

 

Артём Курапов     .

Написано 1 июля 2009 года в 16:37


Первая выглядит очень даже ничего, но помоему это не очень серьёзно. Обычно данных значительно больше 100 рядов, всё это показывать надо достаточно динамически, я в своё время тоже пытался подобный компонент делать, проблема лишь в том что универсальный инструмент с постраничной навигацией, многоколончатой сортировкой (тут он на удивление есть), фильтрацией и такими фичами как массовое удаление или быстрое добавление – будет слишком громоздким. И полюбому сортировать большие объёмы надо на стороне сервера. Ну а поиграться, конечно приятная штука.

 

Жилинcкий Владимир     .

Написано 1 июля 2009 года в 20:34


Оформление – это оформление, style.css :-)
А вопрос где обрабатывать должен решаться как-то отдельно и в зависимости от типа и объёма данных, нагрузки на клиент и сервер и прочих факторов.

Сортировать сайты по пузомеркам – идеально :-)

 

Executor     .

Написано 2 июля 2009 года в 14:40


Что-то у меня не получается подружиться с JS, так в принципе все понятно, но постоянно скрипты не работают)

 

Роман Доморенок     .

Написано 3 июля 2009 года в 09:55


Если мне не изменяет память, главным недостатком такой сортировки является неработоспособность при постраничном выводе таблицы )

 

Manyuta     .

Написано 3 июля 2009 года в 10:14


Скачал, сейчас пытаюсь разобраться.

 

Ярик     .

Написано 10 июля 2009 года в 23:10

 

Михаил Гутентог     .

Написано 11 декабря 2010 года в 14:44


Недавно закончил скрипт, сортирующий таблицы в 10000 строк на стороне клиента. С фильтрацией, индексированием (если включить опцию), постраничным выводом… Работает во всех браузерах типа ИЕ, Гекко, Сафари, Опера. Дистрибутив: http://ir2.ru/sorters/BigTableSorter.zip (29 КБ).

Использовал для поиска и отбора фильмов из офф-лайн таблицы трекера: http://ir2.ru/test-tracker/tracker1.htm (2500 строк, 2 МБ). Скорость вполне комфортная.

 

Василий Викторович     .

Написано 29 января 2011 года в 01:47


Использую editablegrid jquery plugin
http://www.webismymind.be/editablegrid/

Оставить комментарий:

You must be logged in to post a comment.

© 2007-2010 Блог интернет-разработчика, автор — Zhilinsky.ru.
При использовании информации ссылка на источник обязательна.