主页 / 问题 / 1481928
Accepted
Роман
Asked:2022-12-28 16:36:36 +0000 UTC2022-12-28 16:36:36 +0000 UTC

分页不起作用

  • 772

伙计们，请帮我找出 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”的错误。我将非常感谢您的帮助。

javascript

1 个回答

  1. Best Answer

    GitHub 上的Pagination.js插件文档提供了一个定义要分页的输出结构的函数示例。在给出的示例中，数据将显示在无序列表中，其中每个数据元素都包装在一个标签中：<li>

    function simpleTemplating(data) {
    var html = "<ul>";
    $.each(data, function(index, item){
        html += '<li>'+ item +'</li>';
    });
    html += '</ul>';
    return html;
}

    在回调函数内部初始化分页时调用此函数，形成第一“部分”数据的输出（来自 的数据元素的数量，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 代码中，仅通过将所需数量的数据元素插入具有分页数据的容器中<div id="data-container"></div>，删除它们并在每次单击时插入新的元素来更改 DOM 结构导航元素。

    如果分页数据最初由 elements 表示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>

    • 1

相关问题