В последнем проекте над которым я работал, была необходимость постранично выводить таблицы данных, с возможностью сортировать. Конечно, постраничный вывод и сортировку можно было бы реализовать средствами 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>
Вот и все