JQuery. Сортировка, выделение и подсветка данных в таблице

1 июля 2012 | Автор: | Категория: JQuery и PHP

Сегодня на блоге появилась новая категория — JQuery. Первая публикация в ней будет посвящена работе с таблицами, а именно сортировке, выделению и подсветке данных.

Книги по jQuery и PHP

Для сортировки данных я использовал специальный плагин — 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

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

Подробно всё расписывать не стал, если кому-то интересно, все исходники можно скачать и посмотреть как что работает.

Метки: 

3 комментария к "JQuery. Сортировка, выделение и подсветка данных в таблице"

  1. Константин | 21 июня 2012 @ 22:11
  2. Как я понимаю, это всё в приделах одной таблицы без учёта разбиения на страницы?

    Ответить

    • seogrot | 23 июня 2012 @ 1:27
    • Да, вы всё правильно понимаете. Я пока только осваиваю азы, так что примеры будут не слишком сложные. А вообще насколько знаю плагин tablesorter позволяет сортировать и таблицы разбитые на несколько страниц.

      Ответить

  3. Константин | 23 июня 2012 @ 19:18
  4. Да, там есть возможность ajax подгрузки, но тогда решение теряет всякий смысл. Разве что в качестве минимизации нагрузки. В общем, всё относительно. Главное, что думаю фишку нельзя будет использовать в чём-то, что является скажем админкой, где в таблице присутствуют ссылки и прочие активные элементы имхо, тут на 100% не уверен.

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *