При разработке сайта нам часто нужно показывать некоторые табличные данные. Возможно, нам понадобится показать следующие рейсы из Рима в Лондон, отели, доступные на выбранный диапазон дат, или последние книги, опубликованные таким издателем, как SitePoint. HTML предоставляет элемент для табличных данных, который, что неудивительно, называется table Проблема в том, что этот элемент не имеет API, который позволяет сортировать его строки на основе определенных критериев, таких как цена от низкой до высокой.
Вследствие этого отсутствия API было разработано и опубликовано несколько библиотек JavaScript для решения этой проблемы. В этой статье я познакомлю вас с Tablesorter (фактически его форком), плагином jQuery для сортировки таблиц на стороне клиента.
Что такое Tablesorter?
Tablesorter от Rob Garrison является вилкой оригинальной библиотеки Tablesorter, разработанной Кристианом Бахом . Tablesorter — это простой плагин jQuery, который обеспечивает динамическую сортировку строк на основе значений одного или нескольких заданных столбцов, а также предоставляет возможность разбивать таблицы на таблицы, созданные с использованием элемента HTML- table Как я уже упоминал во введении, этот плагин помогает заполнить пробел в этих часто необходимых функциях, которые не являются родными в HTML. Будучи библиотекой на стороне клиента, одним из ее главных преимуществ является то, что нашим пользователям не нужно перезагружать страницу, которую они посещают, для сортировки данных. Кроме того, сортировка на стороне клиента часто выполняется очень быстро, если не требуется сортировать очень большой объем данных.
Что вам понравится в этой библиотеке, так это ее простота. В самом простом случае вы должны включить библиотеку, а затем вызвать метод, называемый tablesorter() Наконец, этот плагин имеет обширную документацию , которая поможет вам справиться с большинством ситуаций, с которыми вы можете столкнуться в своих проектах.
Теперь, когда вы знаете, что это за плагин, давайте посмотрим, как вы можете использовать его на своем сайте.
Начало работы с Tablesorter
Чтобы использовать Tablesorter, вы должны загрузить его и включить в те страницы, где вы собираетесь его использовать. Вы можете получить Tablesorter несколькими различными способами. Первый — это посещение его репозитория GitHub , а второй — с помощью следующей команды Bower.
bower install jquery.tablesorter
Этот плагин состоит из основного файла JavaScript, других необязательных файлов JavaScript и нескольких тем. После загрузки вы должны включить одну из тем, которые вы можете найти в папке «css», как показано ниже:
<link rel="stylesheet" href="css/theme.default.css" />
В этом случае код включает тему «по умолчанию». Вы должны импортировать файл JavaScript после библиотеки jQuery:
<script src="path/to/jquery.js"></script>
<script src="js/jquery.tablesorter.min.js"></script>
Есть еще один последний шаг, который нужно выполнить, прежде чем вы будете готовы использовать Tablesorter на своем веб-сайте. Вы должны назначить классификатор tablesorter Это нужно только для стилизации, но это то, что вы действительно хотите сделать, иначе тема не будет применена. Хотя плагин все еще работает, ваши пользователи не будут иметь никакого представления о добавленных функциях.
Добавление класса tablesorter
Есть два способа добавить класс в интересующие вас таблицы. Первое и более простое — вручную добавить имя класса в исходный код HTML. Но что, если вы не можете получить доступ или изменить источник HTML? В этом случае вы можете использовать JavaScript для его динамического добавления. Допустим, вы хотите, чтобы ваши пользователи могли сортировать данные каждой таблицы на странице. Для этого вы можете написать код, подобный следующему, и поместить его внизу страницы:
var tables = document.getElementsByTagName('table');
for (var i = 0; i < tables.length; i++) {
tables[i].className += ' tablesorter';
}
Это дает вам максимально возможную совместимость с браузерами. Однако, если вам нужна только поддержка современных браузеров, вы можете воспользоваться API-интерфейсом classList и другими методами для получения элементов DOM, таких как queryselectorall() .
Используя jQuery, предыдущий код можно сократить до:
$('table').addClass('tablesorter');
В этот момент мы можем вызвать метод tablesorter() Минимальный пример использования плагина показан ниже:
$('table').tablesorter();
Основное Демо
Чтобы вы увидели этот плагин в действии, мы будем использовать следующую таблицу:
<table class="tablesorter">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Price (in dollars)</th>
</tr>
</thead>
<tbody>
<tr>
<td>The CSS3 Anthology, 4th Edition</td>
<td>Rachel Andrew</td>
<td>29.00</td>
</tr>
<tr>
<td>Instant jQuery Selectors</td>
<td>Aurelio De Rosa</td>
<td>13.26</td>
</tr>
<tr>
<td>Killer UX Design</td>
<td>Jodie Moule</td>
<td>29.00</td>
</tr>
<tr>
<td>Jump Start CSS</td>
<td>Louis Lazaris</td>
<td>19.00</td>
</tr>
</tbody>
</table>
Составление фрагментов, перечисленных до сих пор, приводит к следующей демонстрации :
Нажмите на заголовки, и вы увидите, что ваш стол теперь можно сортировать!
Стоит отметить, что Tablesorter работает со всеми стандартными tabletheadtbody
Установка заказа по умолчанию
Иногда вы хотите, чтобы ваши несортированные данные, поступающие с сервера, отображались уже отсортированными по заданным критериям. Используя Tablesorter, этого легко достичь, передав литерал объекта в метод tablesorter() Этот литерал объекта может содержать несколько параметров, чтобы настроить плагин так, как вам нужно. Список всех доступных опций приведен в официальной документации .
Допустим, вы хотите отсортировать все таблицы на странице по значениям первого столбца в порядке убывания. Для этого необходимо передать свойство sortList10 Поэтому для достижения обсуждаемой цели вы должны написать:
$('table').tablesorter({
sortList: [[0, 1]]
});
Этот пример можно расширить, установив критерий порядка нескольких столбцов. Если вы хотите отсортировать таблицу на основе значений первого столбца в порядке убывания и третьего столбца в порядке возрастания, вы можете написать:
$('table').tablesorter({
sortList: [[0, 1], [2, 0]]
});
Демонстрационная версия, в которой используется предыдущий пример, показана ниже и также доступна в виде JSFiddle :
Добавление полос на стол
Чтобы улучшить читаемость ваших данных, вы должны использовать два разных цвета для ваших строк: один для нечетных строк и другой для четных строк. С Tablesorter выполнение этой задачи до смешного просто. Все, что вам нужно сделать, это добавить свойство под названием widgetszebra
$('table').tablesorter({
widgets: ['zebra']
});
Прежде чем мы увидим результат этого кода, я хочу показать что-то еще.
Изменение темы по умолчанию
Если вы хотите изменить тему по умолчанию, вы должны заменить CSS-файл файлом, представляющим нужную тему. Итак, допустим, вы хотите использовать «синюю» тему. Вы должны заменить строку:
<link rel="stylesheet" href="css/theme.default.css" />
С:
<link rel="stylesheet" href="css/theme.blue.css" />
Затем вы должны сообщить плагину об изменении, установив в объекте конфигурации свойство theme В этом случае, поскольку использовалась «голубая» тема, вы должны написать:
$('table').tablesorter({
theme: 'blue'
});
Прежде чем мы увидим живое демо, я хочу представить вам еще одну особенность: нумерацию страниц.
Пейджинг данных с помощью Tablesorter
Функция разбивки на страницы предоставляется Tablesorter как внешний плагин, поэтому, прежде чем мы сможем использовать ее на наших страницах, мы должны включить относительный файл JavaScript и CSS. Плагин pagination загружается вместе с Tablesorter, и оба файла находятся в папке с именем «addons / pager». Как только вы включите эти файлы в свою страницу (помните, что файл JavaScript должен быть включен после плагина Tablesorter), вы должны настроить разметку для пейджера, как показано ниже:
<div id="pager" class="pager">
<img src="addons/pager/icons/first.png" class="first"/>
<img src="addons/pager/icons/prev.png" class="prev"/>
<span class="pagedisplay"></span>
<img src="addons/pager/icons/next.png" class="next"/>
<img src="addons/pager/icons/last.png" class="last"/>
<select class="pagesize" title="Select page size">
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="gotoPage" title="Select page number"></select>
</div>
На этом этапе вы должны вызвать метод tablesorterPager() Исходя из предыдущей разметки, вы должны написать:
$('#my-table')
.tablesorter()
.tablesorterPager({
container: $('#pager')
});
Пример таблицы, которая использует пейджер, изменила тему по умолчанию, а также использует виджет полоски зебры, показан ниже и также доступен как JSFiddle :
Вывод
В этой статье я познакомил вас с форком Tablesorter, плагина jQuery для превращения стандартной таблицы HTML в сортируемую таблицу без обновления страницы. Этот плагин может успешно анализировать и сортировать многие типы данных, включая связанные данные в ячейке. Используя этот плагин, вы также можете добавлять нумерацию страниц в свои данные, чтобы их было легче читать. Если вам понравилась идея, но не плагин, и вы хотите альтернативу, я предлагаю вам проверить DataTables .