【问题标题】:Jquery pagination plugin - Next/Previous pagination links to show next/previous full group of page numbersJquery 分页插件 - 下一个/上一个分页链接显示下一个/上一个完整页码组
【发布时间】:2017-11-09 22:33:09
【问题描述】:

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

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

例如, 分页像

First Prev 1 2 3 4 5 Next Last

点击“下一步”按钮,

第一个 上一个 6 7 8 9 10 下一个 最后一个

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

【问题讨论】:

  • 请指定插件的链接。你用了什么代码?
  • 我已经编辑了我的问题。请检查

标签: javascript php jquery pagination


【解决方案1】:

初始化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>

【讨论】:

  • 有没有办法保留活动页码?
  • 在我的示例中,num 包含选定的页码。
  • 是的。我的意思是,例如假设我们在第 2 页,当我单击“下一步”按钮时,第 6 页被突出显示。我希望第 2 页保持突出显示,直到我们更改页码
  • 分页部分的底部,> prev 和 next 不应加载页面。它只能在单击特定页面时滚动和加载。 - 这是我的要求
  • 这个插件没有这个选项。您可以创建一个issue
猜你喜欢
  • 2013-08-26
  • 2014-09-26
  • 1970-01-01
  • 2014-11-26
  • 2010-11-23
  • 2012-03-15
  • 1970-01-01
  • 2013-04-08
  • 1970-01-01
相关资源
最近更新 更多