Tablesorter — это плагин для JavaScript-библиотеки jQuery, который позволяет сортировать HTML-таблицы, включающие теги thead и tbody, без перезагрузки страницы на стороне клиента. Tablesorter может анализировать и отсортировать различные типы данных, включая связанные данные в ячейке. Плагин имеет множество функций, включая:
Сортировку по нескольким столбцам таблицы.
Анализ сортируемых значений, в том числе URL-адресов, чисел, валют, IP-адресов, дат (в различных форматах), времени. Кроме того вы можете легко расширить этот функционал, добавив свои типы данных.
Поддержка HTML-атрибутов rowspan и colspan в th элементах таблицы.
Поддержка «скрытой» многокритериальной сортировки (например, выполняется первоначальная сортировка по одному из критериев, а затем по алфавиту внутри отсортированных групп).
Расширяемость с помощью виджетов.
Поддержка многими популярными браузерами: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+.
Небольшой размер исходного кода (всего 12-13 КБ).
Подключение плагина
Для использования плагина необходимо включить файл библиотеки и самого плагина с помощью тега script в заголовок (head) страницы:
Плагин Tablesorter работает со стандартными HTML-таблицами. Однако, существует одно ограничение — вы должны использовать в таблице теги thead и tbody:
01
<tableid="myTable"class="tablesorter">
02
<thead>
03
<tr>
04
<th>Фамилия</th>
05
<th>Имя</th>
06
<th>E-mail</th>
07
<th>Долг</th>
08
<th>Веб-сайт</th>
09
</tr>
10
</thead>
11
<tbody>
12
<tr>
13
<td>Смит</td>
14
<td>Джон</td>
15
<td>jsmith@gmail.com</td>
16
<td>$50.00</td>
17
<td>http://www.jsmith.com</td>
18
</tr>
19
<tr>
20
<td>Бах</td>
21
<td>Франк</td>
22
<td>fbach@yahoo.com</td>
23
<td>$40.00</td>
24
<td>http://www.frank.com</td>
25
</tr>
26
<tr>
27
<td>Доу</td>
28
<td>Джейсон</td>
29
<td>jdoe@hotmail.com</td>
30
<td>$100.00</td>
31
<td>http://www.jdoe.com</td>
32
</tr>
33
<tr>
34
<td>Конвей</td>
35
<td>Тим</td>
36
<td>tconway@earthlink.net</td>
37
<td>$50.00</td>
38
<td>http://www.timconway.com</td>
39
</tr>
40
</tbody>
41
</table>
Примените функцию сортировки к таблице после загрузки страницы:
1
$(document).ready(function(){
2
$("#myTable").tablesorter();
3
});
В результате получится сортируемая таблица, наподобие этой:
Фамилия
Имя
E-mail
Долг
Веб-сайт
Смит
Джон
jsmith@gmail.com
$50.00
http://www.jsmith.com
Бах
Франк
fbach@yahoo.com
$40.00
http://www.frank.com
Доу
Джейсон
jdoe@hotmail.com
$100.00
http://www.jdoe.com
Конвей
Тим
tconway@earthlink.net
$50.00
http://www.timconway.com
Нажмите на заголовок любого столбца и вы увидите, что теперь таблица стала сортируемой. Перед вызовом функции tablesorter() вы можете сконфигурировать опции сортировки для конкретной таблицы. Для этого в функцию tablesorter() необходимо передать соответствующие аргументы. Например, для сортировки первого и второго столбца в порядке возрастания:
Заметьте, что плагин автоматически определяет большинство форматов данных, в том числе числа, даты, IP-адреса.
Настройка плагина
Плагин имеет множество опций, которые можно настроить во время его инициализации:
Свойство
Тип
Значение по умолчанию
Описание
sortList
Array
null
Массив, задающий столбцы для сортировки и её направление: [[columnIndex, sortDirection], ...], где columnIndex — индекс столбца в таблице (если считать слева направо, первый столбец имеет индекс 0), а sortDirection принимает значение 0 для сортировки по возрастанию и 1 для сортировки по убыванию. Пример правильной настройки (для сортировки первого и второго столбца по возрастанию): [[0,0],[1,0]]
sortMultiSortKey
String
shiftKey
Клавиша, используемая для выбора более чем одного столюца для сортировки. По умолчанию клавиша Shift. Параметр может принимать значения: ctrlKey, altKey.
textExtraction
String Or Function
simple
Определяет метод извлечения данных из ячеек для сортировки. Возможные значения "simple" и "complex". Используйте значение "complex", если внутри ячеек имеется HTML-разметка:
1
<td><strong>
2
123 Main Street
3
</strong></td>
При значении "complex" сортировка может замедлиться на больших таблицах, поэтому рационально написать собственную функцию извлечения текста, например:
Используется для добавления принудительной сортировки, которая будет действовать постоянно вместе с сортировкой, определенной пользователем.
widthFixed
Boolean
false
Включает фиксированную ширину в столбцах таблицы. Это особенно полезно при использовании плагина Pager. Для работы этой функции необходим плагин jQuery dimension.
cancelSelection
Boolean
true
Определяет, следует ли предотвращать выделение текста в заголовках таблицы th. Заголовки становятся похожими на кнопки.
cssHeader
String
"header"
Стиль CSS, используемый для оформления заголовков несортируемых столбцов таблицы. Пример:
01
th.header {
02
background-image: url(../img/small.gif);
03
cursor: pointer;
04
font-weight: bold;
05
background-repeat: no-repeat;
06
background-position: centerleft;
07
padding-left: 20px;
08
border-right: 1pxsolid#dad9c7;
09
margin-left: -1px;
10
}
cssAsc
String
"headerSortUp"
Стиль CSS, используемый для оформления заголовков столбцов таблицы при сортировке по возрастанию. Пример:
1
th.headerSortUp {
2
background-image: url(../img/small_asc.gif);
3
background-color: #3399FF;
4
}
cssDesc
String
"headerSortDown"
Стиль CSS, используемый для оформления заголовков столбцов таблицы при сортировке по убыванию. Пример:
1
th.headerSortDown {
2
background-image: url(../img/small_desc.gif);
3
background-color: #3399FF;
4
}
debug
Boolean
false
Дает возможноть вывода отладочной информации на экран. Полезно в процессе разработки.
Последнюю версию плагина, примеры его работы и настройки, а также полезные сопутствующие плагины можно найти на сайте разработчика:
Источник: w3pro.ru
Июнь 20th, 2012 
Archi 
Опубликовано в рубрике 
Метки: