На этом шаге мы рассмотрим простой пример использования этого плагина.
Материал этого шага базируется на http://www.tablesorter.ru/docs/#Compatibility. Там же можно найти большое количество примеров использования этого плагина.
Расширение Tablesorter может дополнить любую таблицу с элементами <thead> и <tbody> возможностью сортировки, выполнение которой не требует обновления всей страницы. В число особенностей расширения входят: возможность сортировки сразу по нескольким столбцам, возможность сортировки данных в различных форматах (таких как дата, время, денежные величины, адреса URL), вторичная "скрытая" сортировка и возможность расширения посредством системы виджетов.
Адреса, где можно взять компонент: http://tablesorter.com/ или http://archive.plugins.jquery.com/project/tablesorter.
Tablesorter – это плагин, созданный на основе JavaScript библиотеки jQuery и предназначенный для того, чтобы превратить обычную HTML-таблицу, содержащую теги THEAD и TBODY, в сортируемую таблицу без обновления страницы. Tablesorter способен успешно понимать и сортировать множество типов данных, включая связанные данные, содержащиеся в ячейке. Он имеет множество полезных функций, включая:
- сортировку по нескольким столбцам;
- анализ с целью сортировки текста, URI, целых чисел, чисел с плавающей точкой, IP-адресов, валют, дат (согласно стандартам ISO, включая длинные и короткие форматы), времени;
- поддержку атрибутов ROWSPAN и COLSPAN в TH элементах таблиц;
- поддержку «тайной» зависимой сортировки (например, поддержку сортировки по алфавиту при основной сортировке по другим критериям);
- расширяемость посредством системы виджетов;
- кроссбраузерность: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+;
- малый размер кода.
Приведем пример использования этого плагина:
Рис.1. Результат работы плагина (щелкните по заголовку столбца)
Полный текст этого примера можно взять здесь.Для того чтобы использовать плагин tablesorter, нужно подгрузить jQuery библиотеку и сам плагин tablesorter в теге <head> HTML документа.
<script type="text/javascript" src="/путь/к/jquery-latest.js"></script> <script type="text/javascript" src="/путь/к/jquery.tablesorter.js"></script>
Tablesorter работает в стандартных HTML таблицах с употреблением обязательных тегов THEAD и TBODY:
<table id="myTable">
<thead>
<tr>
<th>Фамилия</th>
<th>Имя</th>
<th>Email</th>
<th>Платеж</th>
<th>Сайт</th>
</tr>
</thead>
<tbody>
<tr>
<td>Иванов</td>
<td>Петр</td>
<td>ivanov@gmail.com</td>
<td>$50.00</td>
<td>http://www.ivanov.ua</td>
</tr>
<tr>
<td>Петров</td>
<td>Иван</td>
<td>petrov@yandex.ru</td>
<td>$50.00</td>
<td>http://www.petrov.com.ru</td>
</tr>
<tr>
<td>Сергеев</td>
<td>Михаил</td>
<td>sergeed@mail.ru</td>
<td>$100.00</td>
<td>http://www.sergeev.ru</td>
</tr>
<tr>
<td>Михайлов</td>
<td>Потап</td>
<td>medvedev@rambler.ru</td>
<td>$50.00</td>
<td>http://www.yandex.com</td>
</tr>
</tbody>
</table>
После загрузки страницы дайте команду tablesorter сортировать страницу:
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
Щелкая мышкой по заголовкам столбцов таблицы, можно увидеть, что таблица теперь поддаётся сортировке! Можно также использовать опции при инициализации таблицы. В этом случае мы дадим команду сортировать первую и вторую колонки в порядке возрастания:
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);
Примечание. Tablesorter автоматически опознаёт большинство типов данных, включая числа, даты, IP-адреса.
На следующем шаге мы закончим изучение этого вопроса.
