0

Ребят, помогите, пожалуйста, разобраться с плагином Pagination.js или может есть какой-нибудь другой хороший? Есть список товаров в магазине, нужно разбить его на части. Убил уже много времени, не получается реализовать.

$("#pagination-container").pagination({
  dataSource: [
    1, 2, 3, 4, 5, 6, 7,
  ],
  pageSize: 12,
  autoHidePrevious: true,
  autoHideNext: true,
  callback: function(data, pagination) {
    // template method of yourself

    var html = template(dataSource);
    $("#data-container").html(html);
  },
});
<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>

Но при генерации страницы вылетает ошибка "template is not defined". Буду очень признателен за помощь.

11
  • js код не добавили 28 дек 2022 в 8:37
  • Блин, не получается вставить нормально код
    – Роман
    28 дек 2022 в 8:40
  • у редактора есть кнопки специальные...а в целом это markdown (если это о чём-то говорит) 28 дек 2022 в 8:43
  • 1
    template is not defined --- так а где вы определили необходимую функцию, чтобы к ней обращаться? 28 дек 2022 в 8:48
  • Пагинация работает, вы просто не объявили функцию template.
    – ΝNL993
    28 дек 2022 в 8:51

1 ответ 1

1

В документации плагина 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>

2
  • Лучи добра тебе дружище, лайки пока ставить не могу
    – Роман
    28 дек 2022 в 12:56
  • @Роман Спасибо за лучи) Если ответ помог, можешь нажать на серую галку рядом с ответом.
    – Gene Erbin
    28 дек 2022 в 13:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.