Question

我正在使用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);
    }    
});

Answer 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);
});

希望有所帮助当然，我还没有做到这一切，只有大线

Answer 2

只需添加＆＃34; jPages.js＆＃34;文件来自

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

并添加以下代码： Html代码： div class =＆＃34; holder＆＃34;

$（函数（）{

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

}）;

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

2 个答案: