В документации плагина Pagination.js на GitHub указан пример функции, которая определяет структуру вывода данных, подлежащих пагинации. В представленном примере данные будут выводиться неупорядоченным списком, в котором каждый элемент данных обёрнут в тег <li>
:
function simpleTemplating(data) {
var html = "<ul>";
$.each(data, function(index, item){
html += '<li>'+ item +'</li>';
});
html += '</ul>';
return html;
}
Эта функция вызывается при инициализации пагинации внутри функции-callback'а, формируя вывод первой "порции" данных (количество элементов данных из dataSource
, обрабатываемых функцией за раз и выводимых на одной странице пагинации, зависит от параметра pageSize
).
$('#pagination-container').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
pageSize: 3,
callback: function(data, pagination) {
var html = simpleTemplating(data);
$('#data-container').html(html);
}
})
Затем эта функция вызывается каждый раз при клике на элементы навигации (номера страниц и стрелочки), обращаясь к dataSource
, получая нужное количество элементов данных со сдвигом, зависящим от номера активной страницы пагинации.
Плагин Pagination.js предполагает, что исходные данные для пагинации хранятся внутри js-кода, меняя структуру DOM только вставляя нужное количество элементов данных в контейнер с данными пагинации <div id="data-container"></div>
, удаляя их и вставляя новые при каждом клике на элементы навигации.
Если данные для пагинации изначально представлены элементами html
, а функция, определяющая структуру вывода, будет переносить элементы из их изначального положения в структуре страницы в контейнер с данными пагинации:
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
const items = document.querySelectorAll('.item');
$("#pagination-container").pagination({
dataSource: [...items],
pageSize: 3,
callback: function(data, pagination) {
var html = simpleTemplating(data);
$("#data-container").html(html);
},
});
function simpleTemplating(data) {
const html = new DocumentFragment();
$.each(data, function(index, item){
html.append(item);
});
return html;
}
то при инициализации пагинации только первые n
элементов (n
указано в параметре pageSize
), будут перемещены со своей позиции в контейнер данных для пагинации:

При перемещении между страницами элементы данных будут перемещаться из изначальной позиции в контейнер с данными пагинации в соответствии с выбранной страницей пагинации:

Чтобы избежать отображения элементов данных в структуре страницы до того, как они переместятся в контейнер с данными пагинации, предлагаю при выводе этих элементов добавить им атрибут hidden
, а в функции simpleTemplating
удалять этот атрибут.
Итоговый код представлен ниже. CSS для элементов пагинации был взят с сайта плагина Pagination.js
const items = document.querySelectorAll('.item');
$("#pagination-container").pagination({
dataSource: [...items],
autoHidePrevious: true,
autoHideNext: true,
pageSize: 3,
callback: function(data, pagination) {
var html = simpleTemplating(data);
$("#data-container").html(html);
},
});
function simpleTemplating(data) {
const html = new DocumentFragment();
$.each(data, function(index, item){
item.removeAttribute('hidden');
html.append(item);
});
return html;
}
.paginationjs {
display:flex;
line-height:1.6;
font-family:Marmelad,"Lucida Grande",Arial,"Hiragino Sans GB",Georgia,sans-serif;
font-size:14px;
box-sizing:initial
}
.paginationjs:after {
display:table;
content:" ";
clear:both
}
.paginationjs .paginationjs-pages {
float:left;
margin-left:10px
}
.paginationjs .paginationjs-pages ul {
float:left;
margin:0;
padding:0
}
.paginationjs .paginationjs-pages li {
float:left;
border:1px solid #aaa;
border-right:none;
list-style:none
}
.paginationjs .paginationjs-pages li>a {
min-width:30px;
height:28px;
line-height:28px;
display:block;
background:#fff;
font-size:14px;
color:#333;
text-decoration:none;
text-align:center;
cursor:pointer
}
.paginationjs .paginationjs-pages li>a:hover {
background:#eee
}
.paginationjs .paginationjs-pages li.active {
border:none
}
.paginationjs .paginationjs-pages li.active>a {
height:30px;
line-height:30px;
background:#aaa;
color:#fff;
cursor:default
}
.paginationjs .paginationjs-pages li.disabled>a {
opacity:.3;
cursor:default
}
.paginationjs .paginationjs-pages li.disabled>a:hover {
background:0 0
}
.paginationjs .paginationjs-pages li:first-child,
.paginationjs .paginationjs-pages li:first-child>a {
border-radius:3px 0 0 3px
}
.paginationjs .paginationjs-pages li:last-child {
border-right:1px solid #aaa;
border-radius:0 3px 3px 0
}
.paginationjs .paginationjs-pages li:last-child>a {
border-radius:0 3px 3px 0
}
.paginationjs .paginationjs-nav {
float:left;
height:30px;
line-height:30px;
font-size:14px
}
.paginationjs>:first-child {
margin-left:0
}
.paginationjs .paginationjs-pages li.paginationjs-next {
border-right:1px solid #aaa\9
}
#data-container {
overflow: auto;
margin: 15px 0;
}
#data-container div {
background: #EEE;
margin-bottom: 3px;
padding: 8px;
line-height: 1em;
list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://pagination.js.org/dist/2.5.0/pagination.min.js"></script>
<div id="data-container"></div>
<div id="pagination-container"></div>
<div class="item" hidden>item1</div>
<div class="item" hidden>item2</div>
<div class="item" hidden>item3</div>
<div class="item" hidden>item4</div>
<div class="item" hidden>item5</div>
<div class="item" hidden>item6</div>
<div class="item" hidden>item7</div>
<div class="item" hidden>item8</div>
<div class="item" hidden>item9</div>
<div class="item" hidden>item10</div>
<div class="item" hidden>item11</div>
<div class="item" hidden>item12</div>
template
.