Плагин 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();
});

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

Нажмите на заголовок любого столбца и вы увидите, что теперь таблица стала сортируемой. Перед вызовом функции tablesorter() вы можете сконфигурировать опции сортировки для конкретной таблицы. Для этого в функцию tablesorter() необходимо передать соответствующие аргументы. Например, для сортировки первого и второго столбца в порядке возрастания:

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

Заметьте, что плагин автоматически определяет большинство форматов данных, в том числе числа, даты, IP-адреса.

Настройка плагина

Плагин имеет множество опций, которые можно настроить во время его инициализации:

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

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

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

headers: { 0: { sorter: false}, 1: {sorter: false} }

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;
}

th.headerSortUp {
  background-image: url(../img/small_asc.gif);
  background-color: #3399FF;
}          

th.headerSortDown {
  background-image: url(../img/small_desc.gif);
  background-color: #3399FF;
}