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

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

如果您想要上一页和下一页按钮之间的所有页面，您只需知道页数，在这种情况下，

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

希望有帮助当然，我并没有全部完成，只是大行