Постраничная навигация встречается на 99% сайтов. Исключение составляют разве что визитки и промо сайты.
Такой подход очень удобен,если у вас много контента и помещать его весть(или ссылки на него) на одной странице нецелесообразно с точки зрения юзабилити сайта и отношения поисковиков.
Постраничную навигацию можно выполнять как на стороне сервера, так и на стороне клиента.Разница между этими двумя методами ощутима...
Заключается она чём:
-клиентская:
долгая загрузка "в первый раз"
мгновенное переключение между страницами
высокая нагрузка на сервер(только при первом обращении)
возможны проблемы с кроссбраузерностью
необходимы дополнительные библиотеки и стили
-серверная:
одинаковая скорость загрузки как при первом обращении,так и к любой странице
перемещение между страницами занимает время
нормальная нагрузка на сервер
никаких заморочек с кроссбраузерностью
нет необходимости в дополнительных библиотеках и стилях
О постраничной навигации на PHP читайте тут.
Какой способ выбирать-решать вам. Всё зависит от поставленных задач и условий.
Например выводить 100000 элементов с клиентской постраничной навигацией-это бред. А для ста элементов вполне подойдет и клиентский вариант. А вообще всё зависит от мощности сервера и базы данных в частности.
Клиентская часть.
Способ 1.
Постраничная навигация css
Подключаем к сайту файл со стилями и JavaScript
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/imtech_pager.js"></script>
Можете также скачать их во вложении в конце статьи.
Эти стили поместите в style.css
.main
{
margin:0 auto;
background: #FFFFFF;
width:85%;
font-size:80%;
border:1px #000 solid;
padding:1em 2em 2em;
-moz-border-radius:3px;
-webkit-border-radius:3px
}
#content p{
text-indent:20px;
text-align:justify;
}
#pagingControls ul{
display:inline;
padding-left:0.5em
}
#pagingControls li{
display:inline;
padding:0 0.5em
}
Также поместите на странице следующий JavaScript код
<script type="text/javascript">
var pager = new Imtech.Pager();
$(document).ready(function() {
pager.paragraphsPerPage = 2; // определение количества элементов на странице
pager.pagingContainer = $('#content'); // выбор блока content в котором находиться текст
pager.paragraphs = $('p', pager.pagingContainer); //выбор тега для разделения текста
pager.showPage(1);
});
</script>
Таким образом текст,помещенный в контейнер с id="content"(который обернут контейнером с class="main") будет разбит на страницы.На каждой странице будет по 2 абзаца в теге p.
В том месте, где вы хотите видеть навигацию - разместите контейнер с id="pagingControls".