Открыть меню    

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

нумерация страниц на 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);
    }
    
    
    
    
    
}   
       

Источник

Комментарии к статье

аватарка пользователя
2012-08-18
s@s.ru

А где эти два js файла? Из предложенного скрипта не понятно, что куда вставлять.

аватарка пользователя
2012-08-18
Stashappy

Урок по моему неплохой. Но есть некоторые недоработки. Во первых, количество выводимых блоков здесь 5. Хорошо. А если у нас накопится очень много блоков? Мы их будем добавлять и добавлять. У нас снизу будет выводиться нумерация. И что самое плохое, эта нумерация здесь "бесконечная". Скажем у нас накопилось 1000 блоков. Делим на 5. Получаем нумерацию снизу до 200. Эту проблему надо решать в этом коде. Иначе вся страница в конечном итоге будет нагромождена этой самой нумерацией.

аватарка пользователя
2012-08-18
Stashappy

Плюс ко всему блок с навигацией, здесь представлена не самым лучшим образом. А если скажем человеку хочется чтобы не просто цифры выводились снизу, а чтобы они были еще и с красивой рамкой.

аватарка пользователя
2012-08-18
dnzl

куда что вставлять можно увидеть в демо, рамки это простой CSS, а кол-во блоков: можете сами "допилить" скрипт, никто не апрещает

аватарка пользователя
2012-08-18
Stashappy

Ну а в чем тогда ваша заслуга уважаемый? Если в итоге человеку, все приходится самому дорабатывать, доделывать, переделывать.

аватарка пользователя
2012-08-18
dnzl

все статьи подразумевают, что их надо переделать под себя - готовые ответы только за деньги.

аватарка пользователя
2012-08-18
Stashappy

Ах.. В таком случае, прошу прощения за критику.

аватарка пользователя
2014-04-22
mdv

Урок хороший и профессиональный. Хочу сделать якорь в разметке навигации, чтобы при переключении страницы, она не оставалась на одном месте, а переходила в начало страницы. В скрипте: (pagingControls += '<li><a href="#top" onclick="pager.showPage(' + i + '); return false;">), я сделал линк #top на невидимую ссылку <a name="top"></a>, а она не срабатывает, подскажите как сделать.

аватарка пользователя
2014-06-23
Мария

Хороший урок. Все отлично расписано и рассказано. Рекомендую к прочтению еще вот эту статью http://kvinta-a.ru/oformlenie-paginatsii-na-saytakh/

аватарка пользователя
2014-10-12
Олег

Добрый вечер.Спасибо за Ваш урок. Скажите, пожалуйста, как можно оживить Ваше решение для IE8. Применил Ваш пример для себя, но во всеми "любимом" браузере он не работает...

аватарка пользователя
2017-05-02
Александр

Отличный вариант, я его искал 3 дня в инете, все понятно. И со стилями кнопочек и количеством выводимой инфы, молодец

Добавить комментарий