在最后一个和下一个按钮之间添加页码，分页答案

【问题标题】：add page numbers between last and next buttons, pagination在最后一个和下一个按钮之间添加页码，分页
【发布时间】：2020-03-18 12:57:20
【问题描述】：

我正在使用 javascript 分页，我试图让它在“上一个”和“下一个”按钮之间显示 10 个页码，并在它位于第 1 页时删除“上一个”按钮。到目前为止，这是我的代码。 http://jsfiddle.net/jfm9y/405/

<div class="content">1 I have some content</div>
<div class="content">2 I have some content</div>
<div class="content">3 I have some content</div>
<div class="content">4 I have some content</div>
<div class="content">5 I have some content</div>
<div class="content">6 I have some content</div>
<div class="content">7 I have some content</div>
<div class="content">8 I have some content</div>
<div class="content">9 I have some content</div>
<div class="content">10 I have some content</div>
<div class="content">11 I have some content</div>
<div class="content">12 I have some content</div>

<ol id="pagin">
        <li><a id='previous' class="current" href="#">Previous</a></li>
        <li><a id='next' href="#">Next</a></li>
</ol>

pageSize = 3;
var i = 1;
showPage = function(page) {
    $(".content").hide();
    $(".content").each(function(n) {
    if (n >= pageSize * (page - 1) && n < pageSize * page)
        $(this).show();
    });        
}

showPage(i);

$("#previous").click(function() {
    $("#next").removeClass("current");
    $(this).addClass("current");
    if (i != 1) {
      showPage(--i);
    }
});
$("#next").click(function() {
    $("#previous").removeClass("current");
    $(this).addClass("current");
    if (i < ($('.content').length)/3) {
      showPage(++i);
    }    
});

【问题讨论】：

标签： javascript jquery html pagination

【解决方案1】：

如果您希望所有页面都在 prev 和 next 按钮之间，您只需要知道页面数，在这种情况下，

var pages = Math.ceil($('.content').length / pageSize) // (12 = 4pages, 13 = 5pages)

您可以在 javascript 中执行此操作。您添加一个容器（让我们称之为“id='pager'”）并在其中附加内容，例如：

for (var i = 0; i<pages; i++) {
   // We do not want page 0. You could have started with i = 1 too.
   $('#pager').append('<a href="#" class="pageClick">'+(i+1)+'</a>');
}
$('.pageClick').on('click', function(e) {
   e.preventDefault();
   // Index + 1 = the wanted page (index 0 = page 1)
   showPage($(this).index()+1);
});

希望有所帮助当然，我还没有全部做完，只是大行其道

【讨论】：

【解决方案2】：

只需从

添加“jPages.js”文件

https://github.com/luis-almeida/jPages/tree/master/js

并添加以下代码：

HTML 代码： <div class="holder" />

 $(function(){
    $("div.holder").jPages({
        containerID  : "itemContainer",
        perPage      : 10,
        startPage    : 1,
        startRange   : 1,
        midRange     : 5,
        endRange     : 1
    });
});

【讨论】：