Красивые таблицы с применением DHTML/Javascript/AJAX
Таблицы — пример отличной информационной структуры, представляющей данные в наглядном виде. При использовании по назначению — для организации данных, а не для верстки, таблицы — наиболее компактный и в то же время удобный инструмент, что, в принципе, и требуется. =)
Если вы работаете в веб-разработке (дизайне, юзабилити или смежных областях), вам, вероятно, хочется добавить удобства вашим табличнеым данным — сортировка, отбор данных по заданным критериям и даже редактирование — все это возможно. Но как? Ниже — обзор нескольких решений, позволяющих прокачать ваши таблицы до предела. Стоит оговориться – все это происходит на стороне клиента, поэтому следует озаботиться наличием у ваших посетителей современных браузеров.
1. Tablesorter Плагин для JQuery, позволяющий легко добавить сортировку (по нескольким столбцам!) к таблицам. Достаточно легкий, поддерживает пакеты стилей (скины), имеет интерфейс для написания и подключения виджетов, одним из которых является поставляемая в комплекте зебра. Имеется автоматическое определение типа данных в столбце – впрочем, не всегда корректно работающее — мне пришлось писать собственный сортировщик для дат в формате дд-мм-гггг, что, впрочем, нисколько не умаляет достоинств этого скриптика. A favorite of mine =)
![Tablesorter screenshot example](/images/article/13234173860.jpg)
2. ExtJs Grid Поддержка схлопывающихся строк, вписывания в площадь, выбора строк стандартными чекбоксами и горизонтальной прокрутки. Можно навешивать свои панели инструментов.
![ExtJs Grid](/images/article/13234173881.jpg)
3. dhtmlxGrid Постраничное разбиение больших таблиц, отбор данных, итоговые поля, поддержка drag’n'drop, сериализация и импорт данных в/из xml и csv, поддержка скинов либо пользовательских css.
![dhtmlxGrid screenshot](/images/article/13234173892.jpg)
4. Phatfusion sortable Сортировка таблиц с возможностью отбора данных. Требует наличия mootools > 1.11
![Phatfusion sortable](/images/article/13234173913.jpg)
Под катом — еще деcять разновидностей воплощения динамической таблицы с применением DHTML/Javascript/AJAX. А местами —даже Ruby On Rails
![](/images/article/13234173924.jpg)
5. Mootable sorting Еще одна надстройка к mootools — умеет сортировать, подсвечивать и передавать по клику номер выбранной строки. Имеется псевдо-консоль с отладочной информацией – cтранно, что при этом нет поддержки firebug.
![Mootable](/images/article/13234173935.jpg)
6. Elite zebra tables Зебро-таблички с возможностью множественного выбора, разумеется сортировки и подсветки на перекат. Имеется поддержка функциональности html-форм.
![Elite Zebra](/images/article/13234173956.jpg)
7. Prototype TableKit TableKit — коллекция табличных примочек, построенная на Prototype. Имеется сортировка (куда уж без нее?
![;-)](/images/article/13234173977.jpg)
), обрезка длинных рядов, изменение размера ячеек и редактирование ячеек, построенное при помощи AJAX.
![TableKit](/images/article/13234173988.jpg)
8. Таблицы и Ruby On Rails -статья “How to paginate, sort and search a table with Ajax and Rails“. Вдумчивая статья о том, как сделать таблицы функциональными, применяя Rails и AJAX. Небезынтересно тем, кто активно осваивает Rails =)
![Tables and ROR](/images/article/13234174009.jpg)
9. Unobtrusive table sort Сортировка по нескольким столбцам, автоматическое определение типа данных в столбце, обширные возможности по доработке надфилем: интерфейс для плагинов и собственные callback-функции на before-sort и after-sort.
![Unobtrusive table sort](/images/article/132341740110.jpg)
10. Yahoo! UI Datatables Чертова гора возможностей — пусть вас не пугает страшненький внешний вид =)) Сортировка, редактирование данных, постраничная разбивка таблиц, подсветка и пользовательские скины — перечислено только самое насущное.
![Yahoo! UI Datatables](/images/article/132341740211.jpg)
11. Standartista Очень простой в применении сортировщик, оттестированный, как утверждает автор, на множестве различных броузеров. Не сильно богат наворотами, но вполне сойдет для тех, кто хотел отсортировать данные, а не построить истребитель пятого поколения =)
![Standartista](/images/article/132341740412.jpg)
12. Sortable tables by WebFX
![Sortable tables by WebFX](/images/article/132341740513.jpg)
13. SortedTable Сортировка, взаимодействие между несколькими таблицами.
![SortedTable](/images/article/132341740714.jpg)
14. Mootools Table Row and Column Highlighting И снова – mootools =) На этот раз — не вполне сортировщик, но весьма забавный пример того, как можно подсвечивать ячейки с помощью mootools.
![Mootools Table Row and Column Highlighting](/images/article/132341740815.jpg)
Красивые таблицы с применением DHTML/Javascript/AJAX - Генератор расширений Joomla и многое другое на нашем сайте посвященном работе расширений, компонентов, модулей, плагинов для линейки Joomla. Отправляйте ссылку на страницу своим друзьям и в социальные сети воспользовавшись графическими иконками выше.