Получайте новые записи в блоге через RSS RSS
5 октября 2009 | Usability

Быстрая и красивая сортировка таблиц без перезагрузки страницы

Сейчас, в свободное от SEO время, активно занимаюсь разработкой одного небольшого сервиса, потому и писать перестал. Основу этого проекта составляет одна единственная табличка с данными. Можно, конечно, сортировать ее с помощью PHP и MySQL, каждый раз выбирая данные и сортируя их в нужном порядке. Но табличка небольшая, в самом максимуме не больше 250 строк, а пока и вовсе меньше 100, так что заставлять пользователей ждать перезагрузки страницы не хотелось.

Стал искать варианты сортировки таблиц без перезагрузки страницы с помощью JavaScript.

Первой на глаза попалась статья «Сортировка столбцов в таблице без перезагрузки».

htmlcoder.visions

Самый легкий скрипт, сам .js заниемает меньше 6 килобайт даже без оптимизации. Только вот корректно отсортировать столбец с временем в формате «чч:мм:сс» ему не удалось, а еще более неприятно то, что некоторые элементы оформления запрятаны в сам скрипт, а не в таблицу стилей.

Второй была статья «Красивые таблицы с применением DHTML/Javascript/AJAX». В ней приведен обзор целых 14 решений для крисивой сортировки таблиц без перезагрузки страницы: Tablesorter, ExtJs Grid, dhtmlxGrid, Phatfusion sortable, Mootable sorting, Elite zebra tables, Prototype TableKit, Таблицы и Ruby On Rails, Unobtrusive table sort, Yahoo! UI Datatables, Standartista, Sortable tables by WebFX, SortedTable, Mootools Table Row and Column Highlighting.

Но на практике такое обилие выбора скорее меня смутило. Попробовал я только Tablesorter — плагин для JQuery, позволяющий легко добавить сортировку (по нескольким столбцам!) к таблицам. Поддерживает пакеты стилей (скины), имеет интерфейс для написания и подключения виджетов, одним из которых является поставляемая в комплекте зебра. Имеется автоматическое определение типа данных в столбце – впрочем, не всегда корректно работающее — мне пришлось писать собственный сортировщик для дат в формате дд-мм-гггг, что, впрочем, нисколько не умаляет достоинств этого скриптика.

tablesorter

Действительно получается очень красивая таблица, море всяких настроек… Только вот 12Кб на сам скрипт и еще 50Кб на JQuery явный перебор, жаба меня задушила. 🙂

И не только меня. Похожий путь прошел Владимир Жилинский, о чем рассказал в статье «Таблицы: красиво и удобно». Он выделил 2 скрипта: Unobtrusive table sort и Standartista, которые были и в предыдущем обзоре, только там я на них не обратил особого внимания. А вот после статьи Владимира остановился на скрипте Standartista.

standartista1

По умолчанию оформление таблиц довольно неказистое, поэтому я сначала и не обратил внимания. Но все изменяется с помощью CSS и доводится до того вида, который нужен. Сам код JavaScript зачем-то разбит на 3 разных файла, но после объединения в один, весит он 19Кб, а после обработки YUI Compressor’ом и вовсе 7Кб, что приемлемо.

Так что в ближайшее время надеюсь показать то, для чего все это было нужно. 🙂


Заметки по теме:

комментариев 11

  1. Павел (6 октября 2009, 00:24)
  2. О, клевая штука. Мне какраз нужно было что-то подобное, а сортировку средствами пхп и мускуля писать было влом, т.к, табличек и сортировок нужо сделать херову прорву. А эта штука полностью решит всю проблему.
    А вот конечный скрипт обработанный YUI можешь показать?

  3. Владимир Лапшин (6 октября 2009, 17:39)
  4. Держи. 🙂 Проверил, вроде бы сам код вставился корректно.

  5. Cyrill (1 ноября 2009, 15:38)
  6. Жаба по поводу tablesorter была неправа 🙂 production jquery весит 19 Кб. Пожатый tablesorter — 12 Кб. Грузится это все один раз (при этом, jQuery можно и нужно грузить с google.code — шанс того, что он уже в кэше посетителя весьма велик). Не надо, кстати, забывать, что jQ — это не только библиотека для сортировки таблиц, но, вообще говоря, аццки удобный инструмент для чего бы то ни было, связанного с работой на клиенте 🙂

  7. Владимир Лапшин (3 ноября 2009, 17:23)
  8. Cyrill, 19Кб jQuery весит только если он Minified and Gzipped, сам js весит 55Кб, как ни крути.
    Minified версия Standartista, используемого мной, без использования сжатия весит 7.5Кб. Что даже меньше, чем Tablesorter.

    Хотя, безусловно, если в Вашем проекте в любом случае используется jQuery, то Tablesorter — очень простое, красивое и удобное решение.

  9. Dim (20 мая 2010, 07:25)
  10. Tablesorter от jQuery — штука хорошая, но есть один минус: на больших данных(в районе тысячи строк в табл.) некоторые версии IE впадают в ступор. Кэширование данных (ф-ия buildCache()) работает около минуты(!).
    Пришлось отказаться от tablesorter в пользу данного скрипта, хотя в проекте и используется jQuery параллельно.

  11. Михаил (29 июля 2010, 10:02)
  12. «Имеется автоматическое определение типа данных в столбце – впрочем, не всегда корректно работающее — мне пришлось писать собственный сортировщик для дат в формате дд-мм-гггг, что, впрочем, нисколько не умаляет достоинств этого скриптика.»
    А можете выложить то что написали? Заранее спасибо за ответ.

  13. Владимир Лапшин (29 июля 2010, 10:58)
  14. Михаил, извините, слишком уж давно это было. Да и пользоваться я в итоге стал другим скриптом, где проблемы нет.

  15. Михаил (29 июля 2010, 11:11)
  16. Владимир Лапшин, спасибо за ответ, попробую сам написать. А сейчас каким именно пользуетесь?

  17. Михаил Гутентог (11 декабря 2010, 13:56)
  18. Самый маленький известный мне скрипт сортировки — Tiny Sorter с сайта leigeber.com. Я попытался написать ещё меньше: http://ir2.ru/sorters/SimpleTableSorter.zip. Вроде, получилось. Подключается ко всем таблицам с атрибутом class=’sortable’, если надо, и к динамическим.

    А для больших таблиц — http://ir2.ru/BigTableSorter.zip, работает в разы быстрее jquery.sorter’а, может даже работать со словарём в 14000 строк (http://ir2.ru/latrus.htm). Типы данных надо указывать явно в заголовках столбцов.

  19. Александр (5 июня 2012, 16:24)
  20. Всем Добрый день!
    Скрипт отличный, но некорректно сортирует столбцы с датами. Может кто придумал решение данной проблемы?

  21. ih (30 июня 2012, 03:36)
  22. @Александр

    поскольку авторы скрипта — американцы, то у них такой задачи не стояло. формат даты yyyy-mm-dd сортируется как текст.

Напишите комментарий