Jquery分页插件 - 下一个/上一个分页链接,显示下一个/上一个完整的页码组

时间:2017-11-06 10:00:28

标签: javascript php jquery pagination

Jquery分页插件 - 下一个/上一个分页链接,显示下一个/上一个完整的页码组

有没有办法配置下一个/上一个按钮,以便我可以实现以下目的?

例如, 分页如

首页上一页1 2 3 4 5下一页末页

点击“下一步”按钮,

首页上一页6 7 8 9 10下一页末页

注意:我使用的是jquery Bootpag插件 http://botmonster.com/jquery-bootpag/#example-advanced

1 个答案:

答案 0 :(得分:0)

初始化bootpag时需要更改相应的参数:

...
first: 'First',
last: 'Last',
prev: 'Prev',
next: 'Next',
...



$('.pagination').bootpag({
    total: 50,
    page: 2,
    maxVisible: 5,
    leaps: true,
    firstLastUse: true,
    first: 'First',
    last: 'Last',
    prev: 'Prev',
    next: 'Next',
    wrapClass: 'pagination',
    activeClass: 'active',
    disabledClass: 'disabled',
    nextClass: 'next',
    prevClass: 'prev',
    lastClass: 'last',
    firstClass: 'first'
}).on("page", function(event, num){
    $("#content").html("Page " + num); // or some ajax content loading...
});

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//rawgit.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="pagination"></div>
<div id="content"></div>
&#13;
&#13;
&#13;