Сегодня на блоге появилась новая категория — JQuery. Первая публикация в ней будет посвящена работе с таблицами, а именно сортировке, выделению и подсветке данных.
Для сортировки данных я использовал специальный плагин — tablesorter, его вместе с jQuery библиотекой и скриптом, в котором прописан собственный код, необходимо подключить в теге <head> HTML документа.
<script type='text/javascript' src='library/jquery-1.7.2.min.js'></script> <script type='text/javascript' src='library/jquery.tablesorter.min.js'></script> <script type='text/javascript' src='script.js'></script> |
В файле script.js я прописал следующие функции:
$(document).ready(function() { // Сортировка данных в таблице $('#myTable').tablesorter(); }); |
Ждём пока загрузится страница и вызываем команду tablesorter (сортировать таблицу).
// Подсветка строки в таблице $('#myTable tbody tr').hover(function() { $(this).addClass('backlight'); }, function() { $(this).removeClass('backlight'); }); |
Действие hover, объединяет в себе обработчики событий mouseover и mouseout. При наведении курсора на строку, будет добавляться класс backlight, когда курсор убирается, класс будет удаляться. В результате чего получается эффект подсветки.
// Выделение строк в таблице $('#myTable tbody tr').click(function() { $(this).toggleClass('selectlines'); }); |
Действие click вызывает функцию toggleClass, которая добавляет к строке таблицы указанный класс, при повторном клике класс удаляется. Получаем эффект выделения.
Посмотреть, что получилось можно здесь.
Скачать все файлы примера JQuery_Example1.zip
Если покликать мышкой по заголовкам столбцов, то можно увидеть, что данные в таблице сортируются, при наведении курсора на строку происходит подсветка, а при щелчке выделение. Выделить можно сколько угодно строк, после повторного нажатия выделение будет снято.
Подробно всё расписывать не стал, если кому-то интересно, все исходники можно скачать и посмотреть как что работает.
Как я понимаю, это всё в приделах одной таблицы без учёта разбиения на страницы?
Да, вы всё правильно понимаете. Я пока только осваиваю азы, так что примеры будут не слишком сложные. А вообще насколько знаю плагин tablesorter позволяет сортировать и таблицы разбитые на несколько страниц.
Да, там есть возможность ajax подгрузки, но тогда решение теряет всякий смысл. Разве что в качестве минимизации нагрузки. В общем, всё относительно. Главное, что думаю фишку нельзя будет использовать в чём-то, что является скажем админкой, где в таблице присутствуют ссылки и прочие активные элементы имхо, тут на 100% не уверен.