От автора: Очень часто на веб-страницах необходимо отображать данные при помощи таблиц. Таблица очень удобное средство для представления огромного количества данных, относящихся к определенной тематике. Но если в одной таблице отображается около сотни строк а то и больше, это значительно усложняет поиск нужной информации. Поэтому в данном уроке мы с Вами рассмотрим удобный и простой плагин для библиотеки jquery, который позволяет организовать сортировку таблиц по ее полям.
Установка плагина
Первым делом давайте установим плагин tablesorter.js, для этого переходим на сайт //tablesorter.com/docs/
Затем кликаем по ссылке Download:
И скачиваем архив с библиотекой – ссылка jquery.tablesorter.zip. Для данного урока я подготовил следующую страницу:
Таблица сохранена в базе данных и при помощи несложного скрипта, отображается на экране (в исходных материалах к уроку Вы сможете ознакомиться с данным скриптом).
Первым делом подключаем библиотеку jQuery, затем из скачанного архива, нам необходимо подключить плагин jquery.tablesorter.js, плагин постраничной навигации для таблиц jquery.tablesorter.pager.js, пустой файл script.js, в котором мы будем кодировать на языке JavaScript, а так же файл стилей из папки theme.
|
1 2 3 4 5 6 |
<link rel="stylesheet" href="css/style.css"/> <script type="text/javascript" src="js/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script> <script type="text/javascript" src="js/script.js"></script> |
Далее в фале script.js, добавим следующий код:
|
1 2 3 |
jQuery(document).ready(function($) { $("#myTable").tablesorter({}); }); |
То есть, выбираем блок с таблицей и вызываем метод tablesorter(). Теперь обновив информацию в браузере, мы увидим, что появилась возможность сортировки таблиц.
Настройки плагина
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$("#myTable").tablesorter({ sortList:[[1,0]], sortForce:[[3,0]], widgets:['zebra'], cancelSelection:false debug:true headers:{ 1:{ sorter:false } } }); |
Плагин поддерживает следующие настройки:
sortList – сортировка полей по умолчанию, задается в виде массива, следующего вида [x,n], где x – индекс поля (индексация полей начинается с нуля), n – направление сортировки (0 прямое направление, 1 — обратное). Можно указать несколько ячеек [x,n], при этом будет выбрана сортировка, по умолчанию по нескольким полям;
sortForce – принудительная сортировка. Какое бы поле не выбрал пользователь для сортировки, выбранное в этом параметре поле, всегда будет участвовать в сортировке;
widgets – каждая не четная строка, закрашивается в определенный цвет;
cancelSelection – если true, запрещает выделение текста в шапке таблицы;
debug – режим отладки;
headers – используя данное свойство, можно запретить сортировку по выбранным полям таблицы.
Постраничная навигация
Весь контент таблицы, моно разбить на несколько страниц, тем самым улучшить удобство пользования ею. Для этого добавим следующий HTML блок, который будет использоваться как панель управления страницами постраничной навигации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div id="pager" class="pager"> <form> <img src="images/first.png" class="first"/> <img src="images/prev.png" class="prev"/> <input type="text" class="pagedisplay"/> <img src="images/next.png" class="next"/> <img src="images/last.png" class="last"/> <select class="pagesize"> <option selected="selected" value="2">2</option> <option value="4">4</option> <option value="6">6</option> <option value="8">8</option> </select> </form> </div> |
Далее необходимо вызвать метод tablesorterPager():
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$("#myTable").tablesorter({ widgets:['zebra'], debug:true, widthFixed:true }).tablesorterPager({ size:2, container:$('#pager'), positionFixed:false, page:2, cssNext:'.next', cssPrev:'.prev', cssPrev:'.first', cssPrev:'.last', }); |
При этом указываем следующие настройки:
size – количество строк таблицы, на одной странице;
container – блок в котором расположена панель управления постраничной навигацией;
positionFixed – если передать TRUE, в стилях будет задана фиксированная позиция для элементов управления постраничной навигацией;
page – страница которая будет показана по умолчанию;
cssNext – блок, который будет использоваться как кнопка для перехода к следующей странице;
cssPrev– блок, который будет использоваться как кнопка для перехода к предыдущей странице;
cssFirst– блок, который будет использоваться как кнопка для перехода к первой странице;
cssLast– блок, который будет использоваться как кнопка для перехода к последней странице.
Теперь обновив страницу, мы увидим следующее:
На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!
Комментарии (19)