Автор: Christian Bach
Версия: 2.0.3 (хроника изменений)
Лицензия: Двойное лицензирование под MIT or GPL лицензиями.

Просьба о помощи! Если Вам понравился tablesorter переведите немного денег в благодарность его создателям. Пожертвуйте, пожалуйста, или просмотрите список вожделений автора на Амазоне

Комментарии и благодарность можно отправить автору по адресу: . Обсуждение плагина на форуме

Оглавление

  1. Введение
  2. Демо
  3. Начало работы
  4. Примеры
  5. Конфигурация
  6. Скачать
  7. Совместимость
  8. Поддержка
  9. Титры

Введение

Tablesorter – это плагин, созданный на основе JavaScript библиотеки jQuery и предназначенный для того, чтобы превратить обычную HTML-таблицу, содержащую теги THEAD и TBODY, в сортируемую таблицу без обновления страницы. Tablesorter способен успешно понимать и сортировать множество типов данных, включая связанные данные, содержащиеся в ячейке. Он имеет множество полезных функций, включая:

Демо

Имя Фамилия Возраст Всего Скидка Разница Дата
Петр Иванов 28 $9.99 20.9% +12.1 Jul 6, 2006 8:14 AM
Иван Смирнов 33 $19.99 25% +12 Dec 10, 2002 5:14 AM
Сергей Сидоров 18 $15.89 44% -26 Jan 12, 2003 11:14 AM
Михаил Зубов 45 $153.19 44.7% +77 Jan 18, 2001 9:12 AM
Михаил Медведев 22 $13.19 11% -100.9 Jan 18, 2007 9:12 AM

Подсказка! Можно сортировать по нескольким столбцам, удерживая клавишу shift и кликая дважды, трижды или даже четыре раза по заголовку!!!

Начало работы

Для того чтобы использовать плагин 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-адреса. Для дополнительной информации смотри примеры

Примеры

Эти примеры призваны продемонстрировать, на что способен tablesorter. У Вас должно быть разрешено использование Javascript для просмотра этих примеров, также как Вам и Вашим пользователям понадобится включенный Javascript для работы tablesorter.

Главные Метаданные - устанавливаем опции в таблице Высший пилотаж Плагины

Конфигурация

Tablesorter понимает множество опций, с помощью которых Вы можете добиться именно того эффекта, что нужен Вам:

Свойство Тип По умолчанию Описание Ссылка
sortList Array null Массив с инструкциями по колонкам сортировки и порядке в формате [[ИндексКолонки, НаправлениеСортировки], ... ] где ИндексКолонки номер колонки, начинающийся с нуля и считающийся слева направо, а НаправлениеСортировки равно 0 сортировки по возрастанию и 1 по убыванию. Пример аргументов для сортировки по возрастанию сначала первой колонки, а потом второй выглядит вот так: [[0,0],[1,0]] Пример
sortMultiSortKey String shiftKey Клавиша, используемая для выбора более чем одной колонки при многостолбцовой сортировке. По умолчанию - shift. Также можно использовать ctrlKey, altKey.
Ссылка: http://developer.mozilla.org/en/docs/DOM:event#Properties		 Пример
textExtraction String Or Function simple Определяет при помощи какого метода извлекать данные из ячейки таблицы для дальнейшей сортировки. Встроенные методы - "simple" и "complex". Есть смысл использовать "complex", если Ваши данные обрмлены тегами в ячейке таблицы как: <td><strong><em>Тверская 13</em></strong></td>. Complex может быть медленным при больших таблицах, так что подумайте, может Вам стоит написать свою функцию, навроде "myTextExtraction", привдеенной ниже: 
 
var myTextExtraction = function(node) 
{ 
	// извлекаем данные из тегов и возвращаем их
	return node.childNodes[0].childNodes[0].innerHTML;
}
$(document).ready(function()
	{
		$("#myTable").tableSorter( {textExtraction: myTextExtraction} );
	}
);
Tablesorter передаст соответствующий объект jQuery (который в свою очередь будет содержать содержимое ячейки) для парсинга и передачи как возвращаемое значение. Благодарим Джона Нэша за пример. 		Пример
headers Object null Объект с инструкция для управления колонкой в формате: headers: { 0: { option: setting }, ... } Например, отключить сортировку в первых двух колонках таблицы: headers: { 0: { sorter: false}, 1: {sorter: false} } Пример
sortForce Array null Используется для добавления дополнительной принудительной сортировки, применяемой, когда пользователь меняет сортировку в других колонках. Например, может применяться для сортировки людей по алфавиту после какого-либо другого способа сортировки, выбранного пользователем до этого, когда первая сортировка выдала одинаковый результат для нескольких элементов – числа или даты. Это препятствует выводу зависимых данных в случайном порядке. Пример
widthFixed Boolean false Указывает должен ли tablesorter применять фиксированную ширину к столбцам таблицы. Эта функция полезно при использовании для плагина Pager. Требует плагина jQuery dimension Пример
cancelSelection Boolean true Указывает, должен ли tablesorter запрещать выделение текста в заголовке таблицы (TH). Делает заголовок большой кнопкой.
cssHeader String "header" Стиль css, форматирующий заголовок в первоначальном, неотсортированном виде. Пример из голубой темы: 
 
th.header {
	background-image: url(../img/small.gif);	
	cursor: pointer;
	font-weight: bold;
	background-repeat: no-repeat;
	background-position: center left;
	padding-left: 20px;
	border-right: 1px solid #dad9c7;
	margin-left: -1px;
}
cssAsc String "headerSortUp" Стиль css, форматирующий заголовок при сортировке по возрастанию. Пример из голубой темы: 
 
th.headerSortUp {
	background-image: url(../img/small_asc.gif);
	background-color: #3399FF;
}
cssDesc String "headerSortDown" Стиль css, форматирующий заголовок при сортировке по убыванию. Пример из голубой темы: 
 
th.headerSortDown {
	background-image: url(../img/small_desc.gif);
	background-color: #3399FF;
}
debug Boolean false Метка Boolean управляет, должен ли tablesorter отображать отладочную информацию, полезную для разработчика Пример

Загрузка

Полная версия - плагин, документация, аддоны, темы jquery.tablesorter.zip

На выбор - Обязательно разместите компоненты, отмеченные как "обязательные" и проверьте, чтобы они были доступны через браузер.

Обязательно: На выбор/Дополнения: Виджеты: Темы:

Совместимость с браузерами

Tablesorter был успешно протестирован в следующих браузерах при включённом Javascript:

jQuery-совместимые браузеры

Поддержка

Поддержка на английском языке осуществляется через лист рассылки jQuery.

Доступ к jQuery листу рассылки также доступен через Nabble Forums.

Обсуждение и поддержка плагина на русском языке на форуме

Титры

Плагин написан Christian Bach (Кристиан Бах).

Составление документации Брайан Гидинелли, на основе шикарной документации Майка Олсупа.

John Resig респект и уважуха за его офигенный jQuery

Перевод документации Zayamaya, А. Ушаков.

Ссылки для разработчиков

  1. Продвижение сайтов с помощью поисковых систем
  2. Что нужно, чтобы ваш сайт попал в DMOZ?
  3. Практический опыт использования MediaTarget
  4. Хорошие ссылки - только вечные ссылки
  5. Скрипт php генератор паролей. Легко запоминающихся
  6. Zopim - сервис онлайн-поддержки пользователей
  7. А Вы знаете, что Вы можете использовать на своем сайте любой шрифт испозуя технологию Cufon
  8. Генератор названий, брендов, доменов, ников - и все бесплатно.