Плагин jQuery для сортировки HTML-таблиц

Версия для печатиВерсия для печати

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 КБ).

Подключение плагина

Для использования плагина необходимо включить файл библиотеки jQuery и самого плагина с помощью тега script в заголовок (head) страницы:

<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" class="tablesorter">
  <thead>
  <tr>
    <th>Фамилия</th>
    <th>Имя</th>
    <th>E-mail</th>
    <th>Долг</th>
    <th>Веб-сайт</th> 
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Смит</td>
    <td>Джон</td>
    <td>jsmith@gmail.com</td>
    <td>$50.00</td>
    <td>http://www.jsmith.com</td>
  </tr>
  <tr>
    <td>Бах</td>
    <td>Франк</td>
    <td>fbach@yahoo.com</td>
    <td>$40.00</td>
    <td>http://www.frank.com</td>
  </tr>
  <tr>
    <td>Доу</td>
    <td>Джейсон</td>
    <td>jdoe@hotmail.com</td>
    <td>$100.00</td>
    <td>http://www.jdoe.com</td>
  </tr>
  <tr>
    <td>Конвей</td>
    <td>Тим</td>
    <td>tconway@earthlink.net</td>
    <td>$50.00</td>
    <td>http://www.timconway.com</td>
  </tr>
  </tbody>
</table>

Примените функцию сортировки к таблице после загрузки страницы:

$(document).ready(function(){
  $("#myTable").tablesorter();
});

В результате получится сортируемая таблица, наподобие этой:

Фамилия Имя 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() необходимо передать соответствующие аргументы. Например, для сортировки первого и второго столбца в порядке возрастания:

$(document).ready(function(){
  $("#myTable").tablesorter({sortList: [[0,0], [1,0]]});
});
             

Заметьте, что плагин автоматически определяет большинство форматов данных, в том числе числа, даты, 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-разметка:

<td><strong>
123 Main Street
</strong></td>

При значении "complex" сортировка может замедлиться на больших таблицах, поэтому рационально написать собственную функцию извлечения текста, например:

var myTextExtraction = function(node) 
{ 
  // извлекает данные из разметки и возвращает их
  return node.childNodes[0].innerHTML;
}
$(document).ready(function(){
  $("#myTable").tableSorter( {textExtraction: myTextExtraction} );
});
headers Object null

Объект с настройками для отдельных столбцов:

headers: { 0: { option: setting }, ... }

Например, чтобы отменить сортировку первых двух столбцов таблицы, необходимо указать:

headers: { 0: { sorter: false}, 1: {sorter: false} }
sortForce Array null Используется для добавления принудительной сортировки, которая будет действовать постоянно вместе с сортировкой, определенной пользователем.
widthFixed Boolean false Включает фиксированную ширину в столбцах таблицы. Это особенно полезно при использовании плагина Pager. Для работы этой функции необходим плагин jQuery dimension.
cancelSelection Boolean true Определяет, следует ли предотвращать выделение текста в заголовках таблицы 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 Дает возможноть вывода отладочной информации на экран. Полезно в процессе разработки.
Последнюю версию плагина, примеры его работы и настройки, а также полезные сопутствующие плагины можно найти на сайте разработчика: http://tablesorter.com
ВложениеРазмер
Плагин jQuery Tablesorter 2.0.3 (исходные файлы, документация, примеры)866.04 КБ
Ваша оценка: Нет Средняя: 9.3 (38 голосов)

Комментарии

Классная вещь. Сейчас проверю в работе. Спасибо!

+ 5 Очень нужная вещь, особенно пригодилась сортировка по ip-адресу. Использование INET_ATON отпадает само собой

У меня аналогичная таблица в 900 строк. Нужно чтоб отображалось по 100 строк на странице, а все остальные можно было просмотреть кликнув на следующие 100, еще 100 и т.д. Всего 9 страниц соответственно. При этом сортировка должна происходить по всей таблице, а не по тем 100, на странице с которыми нахожусь. Подскажите, пожалуйста, как это можно сделать?! За ранее, спасибо.

Самое простое решение для сортировки в таблицах при использовании jQuery Tablesorter — pager-плагин (есть в архиве во вложении к этой статье).

Большое Вам спасибо за компонент.

Действительно полезный для работы! 

 Работает только с таблицами? Мне бы блоки div по дате отсортировать((

Отсортировать можно что-угодно ) - есть плагин TinySort. В этом плагине можно указать порядок сортировки, по каким атрибутам или даже вложенным элементам нужно сортировать.

Огромное спасибо!

+5 Зашибись плагин какой

Я подгружаю аяксом поочередно таблицы и применяю к ним .tablesorter(), вот тут и возникает проблема, плагин работает адекватно лишь в последней подгрузившейся таблице. в остальных он сортирует, но стрелочка в заголовке не меняется. Кто-то с этим сталкивался? Как решить проблему?

не могут установить. пишет :Не найден установочный XML-файл Joomla.

Joomla 2/5/17

:D   

Плохо, что в таком формате «26 (0), 6 (0), 3 (0) и т.д..» неправильно сортирует. Может, кто знает, как поправить, буду признателен.

 Скорее всего плагин сортирует эти данные формата "26 (0)", как строки. Используйте параметр textExtraction (он описан в статье) для извлечения только первой составляющей значения, например, 26, или преобразования типа 26 (0) -> 260.

А как сортировать по столбцам, которые в свое время тоже разбиты на столбцы?

Отличный плагин! Такой вопрос. Есть таблица, первый столбец которой - это места участников с 1-го по n-й. Соответственно, этот столбец нужно исключить из сортировки вообще. Т.е., там как было 1, 2, 3.... так и должно оставаться. Как такое сделать? Заранее спасибо за ответ.

 При вызове функции sortList, значение sortDirection невозможно изменить. То есть изначально значение работает, а при щелчке на стрелочку значение перестает меняться, и сортировка происходит только в одну сторону.

 У меня первая колонка в таблице это "номер по порядку" и данные там 1, 2, 3... При сортировке по любому из полей порядок в этой колонке сбивается. Как сделать чтобы первая колонка так и оставалась, не сортировалась?

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

Содержание этого поля будет показано только администраторам сайта.