Tablesorter — простой плагин jQuery, который обеспечивает динамическую сортировку столбцов и разбиение на страницы в ваших HTML-таблицах. Это хороший способ создания сортируемых таблиц, которые не требуют обновления пользователем страницы. Вы также можете использовать его, когда вы используете Ajax в своем приложении.
В этом уроке будет показан реальный код и три примера использования Tablesorter. Вы можете скачать код на GitHub . Обратите внимание, что в загрузке Tablesorter фактически отсутствуют несколько графических изображений для своих пейджеров, поэтому вы можете использовать мои файлы GitHub.
Пример 1: Базовый Tablesorter
Мой первый пример показывает, как использовать Tablesorter для предоставления сортируемого списка интернет-доменов для продажи. Вы можете увидеть демо здесь и код здесь .
Есть несколько компонентов, которые нам нужно настроить для Tablesorter. Сначала мы должны загрузить jQuery и плагин TableSorter. Я также загружу его синюю тему CSS:
|
1
2
3
|
<script type=»text/javascript» src=»./js/jquery-latest.js»></script>
<script type=»text/javascript» src=»./js/jquery.tablesorter.min.js»></script>
<link rel=»stylesheet» href=»./themes/blue/style.css» type=»text/css» media=»print, projection, screen» />
|
Затем мы создадим таблицу HTML:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
<table id=»domainsTable» class=»tablesorter»>
<thead>
<tr>
<th>Domain name</th>
<th>gTld</th>
<th>Category</th>
<th>Price</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
<tr><td><a href=»http://geogram.co»>geogram.co</a></td><td>co</td><td>Internet</td><td>$49</td><td><a href=»mailto:[email protected]?subject=Offer for domain name: geogram.co»>Purchase</a></td></tr>
<tr><td><a href=»http://newscloud.com»>newscloud.com</a></td><td>com</td><td>News</td><td>$19999</td><td><a href=»mailto:[email protected]?subject=Offer for domain name: newscloud.com»>Purchase</a></td></tr>
<tr><td><a href=»http://popcloud.com»>popcloud.com</a></td><td>com</td><td>Music</td><td>$14999</td><td><a href=»mailto:[email protected]?subject=Offer for domain name: popcloud.com»>Purchase</a></td></tr>
<!— … —>
</tbody>
</table>
|
После этого нам нужно инициализировать Tablesorter при загрузке страницы:
|
1
2
3
4
5
6
7
8
|
<script>
$(document).ready(function()
{
$(«#domainsTable»).tablesorter({sortList: [[3,1],[2,0]]});
}
);
</script>
</body>
|
В приведенном выше примере я устанавливаю четвертый столбец, который является столбцом цены, для сортировки в порядке убывания, и я устанавливаю третий столбец, который является столбцом категории, для сортировки в порядке возрастания.
После этого вы должны увидеть что-то вроде этого:
Если вы не загружаете свои таблицы динамически из базы данных, вам может быть интересно, есть ли более простой способ генерировать код таблицы HTML из длинных списков. Есть! Я описываю это в разделе Как парковать, перечислять и продавать свои домены .
По сути, я использую электронную таблицу Google Drive, в которой перечислены мои домены, категории и цены, и использую функции сцепления для генерации псевдонимов сервера Apache, кода ценообразования JavaScript и строки таблицы Tablesorter HTML:
Вот как выглядит объединенная функция в Google Диске:
|
1
|
=CONCATENATE(«<tr>»,»<td>»,F2,»</td>»,»<td>»,B2,»</td>»,»<td>»,D2,»</td>»,»<td>$», TO_DOLLARS(E2),»</td>»,»<td>»,G2,»</td>»,»</tr>»)
|
Я использую тему Domena, доступную на Envato Market, в качестве целевых страниц для каждого домена:
Я настроил JavaScript в теме, чтобы изменить цену в зависимости от загруженного домена. Я думаю, что новые версии Domena более элегантно обрабатывают несколько доменов.
Пример 2. Пейджинг с помощью Tablesorter
Теперь мы покажем вам, как реализовать разбиение на страницы с помощью Tablesorter. Вы можете увидеть демо здесь и получить код здесь . Это должно выглядеть примерно так:
На этот раз мы инициализируем Tablesorter в <head> . Мы также добавим скрипт плагина Tablesorter:
|
1
2
3
4
5
6
7
8
|
<script type=»text/javascript» src=»./js/jquery.tablesorter.pager.js»></script>
<script type=»text/javascript»>
$(function() {
$(«table»)
.tablesorter({widthFixed: true, widgets: [‘zebra’]})
.tablesorterPager({container: $(«#pager»)});
});
</script>
|
Мы разместим HTML- div для пейджера под таблицей:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
</table>
<div id=»pager» class=»pager»>
<form>
<img src=»./addons/pager/icons/first.png» class=»first»/>
<img src=»./addons/pager/icons/prev.png» class=»prev»/>
<input type=»text» class=»pagedisplay»/>
<img src=»./addons/pager/icons/next.png» class=»next»/>
<img src=»./addons/pager/icons/last.png» class=»last»/>
<select class=»pagesize»>
<option selected=»selected» value=»10″>10</option>
<option value=»20″>20</option>
<option value=»30″>30</option>
<option value=»40″>40</option>
</select>
</form>
</div>
</body>
|
Вот и все.
Обратите внимание, что я обнаружил, что значки пейджера были удалены с сайта Tablesorter GitHub, поэтому я скачал их вручную из демоверсии. Возможно, вам будет проще получить их из разветвленной версии репозитория Tuts + .
Пример 3: загрузка Ajax
Теперь мы рассмотрим, как использовать jQuery для динамического заполнения таблицы Tablesorter. Для начала мы инициализируем таблицу Tablesorter только с доменами .IO. Это будет выглядеть примерно так:
Когда вы нажмете на ссылку « Добавить домены .COM» , вы увидите, что таблица расширяется доменами .COM.
Вы можете увидеть демо здесь и код здесь . HTML-код для запроса Ajax с доменами .COM находится здесь .
Вот код, который отвечает на событие click, загружая дополнительные строки через Ajax:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
p><a id=»add-com-domains» href=»#»>Add .COM Domains via AJAX</p>
<script>
$(document).ready(function()
{
$(«#domainsTable»).tablesorter({sortList: [[3,1],[2,0]]});
$(«#add-com-domains»).click(function() {
$.get(«./com-domains.html», function(html) {
// append the «ajax’d» data to the table body
$(«table tbody»).append(html);
// let the plugin know that we made a update
$(«table»).trigger(«update»);
// set sorting column and direction, this will sort on the third and second column
var sorting = [[3,1],[2,0]];
$(«table»).trigger(«sorton»,[sorting]);
});
$(this).hide();
return false;
});
}
);
</script>
|
Tablesorter может определенно улучшить пользовательский опыт, если используется хорошо.
Надеюсь, вы нашли этот урок полезным. Пожалуйста, не стесняйтесь размещать исправления, вопросы или комментарии ниже. Вы также можете связаться со мной в Twitter @reifman или написать мне напрямую.