Сортировка таблиц: tablesorter для jQuery. Часть 1
Предлагаю вашему вниманию jQuery-плагин tablesorter, который позволяет преобразовать стандартную HTML таблицу с тегами <thead> и <tbody> в таблицу с возможностями сортировки столбцов без перезагрузки страницы.
- Сортировка разных типов данных: текст, URI, целые и вещественные числа, валюта, IP-адреса, даты (ISO, длинный и короткий формат), время
- Поддержка rowspan и colspan в элементах <th>
- Поддержка вторичой “скрытой” сортировки (например, сохранение сортировки по алфавиту, затем сортировка по другим критериям)
- Расширяемость с помощью виджетов
- Кросс-браузерность: IE 6.0 +, FF 2 +, Safari 2.0 +, Opera 9,0 +
Подключаем необходимые файлы в разделе head HTML-документа:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<link type="text/css" rel="stylesheet" href="themes/green/style.css" />
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<link type="text/css" rel="stylesheet" href="themes/green/style.css" />
HTML:
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Email</th>
<th>Дата</th>
<th>Сумма</th>
</tr>
</thead>
<tbody>
<tr>
<td>Александр</td>
<td>Петров</td>
<td>petrov@mail.ru</td>
<td>2006-11-07</td>
<td>400.45</td>
</tr>
<tr>
<td>Ольга</td>
<td>Синцова</td>
<td>olga@yandex.ru</td>
<td>2007-08-02</td>
<td>600.25</td>
</tr>
<tr>
<td>Елена</td>
<td>Козлова</td>
<td>elena@mail.ru</td>
<td>2007-02-15</td>
<td>475.75</td>
</tr>
<tr>
<td>Константин</td>
<td>Широков</td>
<td>shirokov@yandex.ru</td>
<td>2006-04-23</td>
<td>380.90</td>
</tr>
<tr>
<td>Сергей</td>
<td>Масалков</td>
<td>masalkov@yandex.ru</td>
<td>2007-07-25</td>
<td>580.50</td>
</tr>
</tbody>
</table>
<thead>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Email</th>
<th>Дата</th>
<th>Сумма</th>
</tr>
</thead>
<tbody>
<tr>
<td>Александр</td>
<td>Петров</td>
<td>petrov@mail.ru</td>
<td>2006-11-07</td>
<td>400.45</td>
</tr>
<tr>
<td>Ольга</td>
<td>Синцова</td>
<td>olga@yandex.ru</td>
<td>2007-08-02</td>
<td>600.25</td>
</tr>
<tr>
<td>Елена</td>
<td>Козлова</td>
<td>elena@mail.ru</td>
<td>2007-02-15</td>
<td>475.75</td>
</tr>
<tr>
<td>Константин</td>
<td>Широков</td>
<td>shirokov@yandex.ru</td>
<td>2006-04-23</td>
<td>380.90</td>
</tr>
<tr>
<td>Сергей</td>
<td>Масалков</td>
<td>masalkov@yandex.ru</td>
<td>2007-07-25</td>
<td>580.50</td>
</tr>
</tbody>
</table>
Обратите внимание - таблица должна обязательно содержать в себе теги <thead> и <tbody>.
JavaScript:
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
{
$("#myTable").tablesorter();
}
);
Продолжение следует…
Алексей Качаев:
Использовал этот плагин несколько раз в своих проектах. Но теперь перешел на более функциональный dataGrid.
10 Декабрь 2008, 17:02