Как использовать плагин постраничного вывода в Tablesorter

В последнем проекте над которым я работал, была необходимость постранично выводить таблицы данных, с возможностью сортировать. Конечно, постраничный вывод и сортировку можно было бы реализовать средствами PhP и MySQL, но я решил обратить свой взгляд на JQuery плагин Tablesorter. Я не буду заострять внимание на установке плагина и примерах его  использования, там все достаточно просто и тривиально. Подробное описание на русском вы сможете найти на сайте tablesorter.ru

Единственное, что не до конца описано, это как же использовать постраничный плагин. И так, подробная инструкция. Скачиваем последнюю версию jQuery отсюда, сохраним его как jquery.js. А так же скачиваем jquery.tablesorter.min.js и jquery.tablesorter.pager.js Со скриптами разобрались, нам понадобиться еще css

Так, копируем js скрипты в папочку js, а css в папочку css и подключаем их и добавляем скрипт для постраничного вывода :

<head>
<link rel="stylesheet" href="/css/table.css" type="text/css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/js/jquery.tablesorter.pager.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mytable")
.tablesorter({widthFixed: true})
.tablesorterPager({container: $("#pager")});
});
</script> </head>

Где mytable это id таблицы которую мы хотим использовать для постраничного вывода, a pager — это id тега <div> в котором у нас будет управление. Далее у нас идет таблица:

<table id="mytable" cellspacing="1" class="tablesorter">
<thead>
<tr>
<th>Ф.И.О.</th>
<th>В работе</th>
<th>Ответственный</th>
<th>Адрес</th>
<th>Создана</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Ф.И.О.</th>
<th>В работе</th>
<th>Ответственный</th>
<th>Адрес</th>
<th>Создана</th>
</tr>
</tfoot>
<tbody>
<tr>
<td class="gray">Иванов Петр Ивановичь</td>
<td class="gray">4д 20ч</td>
<td class="gray">Петров Иван Петровичь</td>
<td class="gray">вул. Машин, 5а</td>
<td class="gray">2011-03-31</td>
</tr>
</tbody>
</table>

Скачиваем картинки меню управления страницами картинки и записываем их в папку /images/table. А теперь добавляем меню управления, выглядеть она будет так:

<form>
<div id="pager" class="pager">
<img src="/images/table/first.png" class="first"/>
<img src="/images/table/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="/images/table/next.png" class="next"/>
<img src="/images/table/last.png" class="last"/>
<input type="hidden" class="pagesize" value="25" />
</div></form>

Вот и все

Случайные Статьи

Loading…


Количество просмотров :4640

Оставьте коментарий