Как создать пагинацию (нумерация страниц) на jQuery

Известно, что когда перед разработчиком стоит задача отобразить большое количество информации на сайте, он начинает думать о том, как сделать пагинацию (нумерация страниц): разбить контент на несколько страниц, где на каждой странице содержится какая-то часть информации. Обычно пагинация осуществляется со стороны сервера, то есть для каждой страницы мы извлекаем необходимое количество информации из базы данных. Хочу отметить, что в случае, когда мы имеем дело с небольшим (средним) по величине контентом, такую пагинацию можно избежать: вместо нее можно использовать пагинацию со стороны пользователя, где работа со страницами осуществляется с помощью javascript. Сегодня я покажу вам, как создать такую пагинацию.

Ниже приведена ссылка на demo-пример:

Хорошо, скачайте исходные файлы и приступим к кодированию!

Шаг первый. XHTML

Наш HTML файл будет таким:

HTML

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/imtech_pager.js"></script>

<div class="example">
    <h3><a href="#">Paragraph pagination sample</a></h3>
    <div id="content">
        <div class="z"> Mauris vulputate facilisis dui,
eu facilisis mauris ultricies sed.
Donec pretium consectetur est at vehicula. Fusce euismod egestas commodo.
Cras felis velit, tempor sit amet interdum eget, facilisis a lectus.
Phasellus at elit leo, eget sollicitudin felis. Proin nec ullamcorper eros.
Aliquam dapibus lorem in orci blandit ut vehicula quam egestas.</div>
        <div class="z">Pellentesque eleifend varius velit, 
sit amet mollis nisl ultrices eget.
Fusce et sapien mauris, sollicitudin hendrerit sapien.
In condimentum blandit volutpat.
Morbi tellus nisi, pharetra id faucibus et, tristique at nibh.
Mauris et orci at purus interdum malesuada iaculis et dui.
Etiam id odio massa.</div>
        <div class="z"> Aenean non nibh felis, quis posuere magna.
Maecenas purus metus, mattis eget rutrum id, porttitor eu mi.
Fusce vel mi id urna imperdiet pulvinar. Donec quis mollis mi.
Donec elementum blandit blandit. Maecenas eget commodo sem.
Fusce eleifend venenatis nulla eu ullamcorper.
Sed dictum mattis risus ac egestas.</div>
        
        <!--  и далее  параграфы... -->
        
    </div>
    <div id="pagingControls"></div>
</div>

<script type="text/javascript">
var pager = new Imtech.Pager();
$(document).ready(function() {
    // кол-во выводимых параграфов () или div )
    // на одной странице
    pager.paragraphsPerPage = 5; 
    // основной контейнер
    pager.pagingContainer = $('#content'); 
    // обозначаем требуемый блок ('div.z')
    pager.paragraphs = $('div.z', pager.pagingContainer); 
    pager.showPage(1);
});
</script> 
      

Как вы видите – весь контент расположен внутри тега div с id="content" и обернут в параграфы. Затем, используя jQuery, мы вставим нашу пагинацию в заранее подготовленный блок с id="pagingControls". Ниже расположен скрипт javascript, в котором происходит инициализация страницы: как вы можете увидеть, мною были заданы элемент контейнер, имя тега параграфа и количество параграфов на одну страницу (5).

Поправка! Тег p был заменен на div с class="z". Теперь он может работать со стилями.

Шаг 2. CSS

Ниже приведен используемый CSS файл. Просто несколько стилей для нашей демки:

CSS

#content {
	text-indent:20px;
	text-align:justify;
}
#pagingControls {
	padding-top:15px;
	font-weight:bold;
}
#pagingControls ul {
	display:inline;
	padding-left:0.5em;
}
#pagingControls li {
	display:inline;
	padding:0 0.5em
}

Шаг 3. JS

Два используемых нами JS файла и код работы скрипта:

JQuery

   var Imtech = {};
Imtech.Pager = function() {




    this.paragraphsPerPage = 3;
    this.currentPage = 1;
    this.pagingControlsContainer = '#pagingControls';
    this.pagingContainerPath = '#content';
    // число страниц
    this.numPages = function() {
        var numPages = 0;
        //          ('div.z')                               5
        if (this.paragraphs != null && this.paragraphsPerPage != null) {
        // метод ceil - возвращает наименьшее целое
            numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);
        }

        return numPages;
    };
    
    
    
    
// page - текущая (открытая - номер) страница, то есть в ф-ю передаем номер текущий страницы, контент котор впоследствии выводим
    this.showPage = function(page) {
        this.currentPage = page;
        var html = '';
// slice - Данный метод не изменяет исходный массив, а просто возвращает его часть.
// то есть выводит тот контент, котор соответствует текущей странице
        this.paragraphs.slice((page-1) * this.paragraphsPerPage,
            ((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage).each(function() {
            html += '<div>' + $(this).html() + '</div>';
        });
// вставляем контент
        $(this.pagingContainerPath).html(html);
//                          #pagingControls,  текущая страница(по умолч. 1), общее число страниц     
        renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());
    }
    
    
    
    
// блок с навигацией
    var renderControls = function(container, currentPage, numPages) {
// разметка с навигацией
        var pagingControls = 'Page: <ul>';
        for (var i = 1; i <= numPages; i++) {
            if (i != currentPage) {
                pagingControls += '<li><a href="#" onclick="pager.showPage(' + i + '); return false;">' + i + '</a></li>';
            } else {
                pagingControls += '<li>' + i + '</li>';
            }
        }

        pagingControls += '</ul>';

        $(container).html(pagingControls);
    }
    
    
    
    
    
}   
       

Источник