bootstrap-paginator分页技术，假设有5按钮1.2.3.4.5，我这边情况是：点下一页
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap-paginator分页技术，假设有5按钮1.2.3.4.5，我这边情况是：点下一页相关的知识，希望对你有一定的参考价值。
bootstrap-paginator分页技术，假设有5按钮1.2.3.4.5，我这边情况是：点下一页按钮仍是：1.2.3.4.5，只有当点击5次后才出现6.7.8.9.7.10，问：如何实现点下一页按钮变成2.3.4.5.6，再点下一页按钮为：3.4.5.6.7？
是这样的，paginator里面那两个原件叫，prev 跟next， 默认的是page-1跟 page+1 ，注意这里的下一页指的是page＋1， 而不是你想要的整个1-5 的页面加1成6-10。 如果你想修改的话，得把封装好的bootstap-paginator.js 里面修改事件page-5跟page+5 参考技术A 当然是7了，冰箱里设置的温档就是它，数字越大，负温越高追问冰箱是哪里来的？
bootstrap-paginator 分页控件的使用
首先对js和css的引用
<link rel="stylesheet" href="reference/bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="reference/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="reference/bootstrap-paginator.js"></script>
初始化分页控件
<div id="page"></div>
<script type="text/javascript">
$(function(){
var options={
bootstrapMajorVersion:1, //版本
currentPage:1, //当前页数
numberOfPages:5, //最多显示Page页
totalPages:10, //所有数据可以显示的页数
onPageClicked:function(e,originalEvent,type,page){
}
}
$("#page").bootstrapPaginator(options);
})
</script>
如果bootstrapMajorVersion:1 时，则上面的分页标签用 div
如果bootstrapMajorVersion:3 时，则上面的分页标签用 ul
其中：currentPage 是当前你所在的页数 numberOfPages 是分页按钮可见的最多数 totalPages 是所有数据能分的页数（这些 options（选项）是在初始化分页控件的时候使用的。）
在onPageClicked 事件中 page 参数标识你点击页数时所在的页数。
完整代码如下：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="reference/bootstrap/css/bootstrap.min.css"/> <script type="text/javascript" src="reference/jquery-2.0.3.min.js"></script> <script type="text/javascript" src="reference/bootstrap-paginator.js"></script> </head> <body> <div id="page"></div> <script type="text/javascript"> $(function(){ var options={ bootstrapMajorVersion:1, //版本 currentPage:1, //当前页数 numberOfPages:5, //最多显示Page页 totalPages:10, //所有数据可以显示的页数 onPageClicked:function(e,originalEvent,type,page){ console.log("e"); console.log(e); console.log("originalEvent"); console.log(originalEvent); console.log("type"); console.log(type); console.log("page"); console.log(page); } } $("#page").bootstrapPaginator(options); }) </script> </body> </html>
以上是关于bootstrap-paginator分页技术，假设有5按钮1.2.3.4.5，我这边情况是：点下一页的主要内容，如果未能解决你的问题，请参考以下文章
bootstrap-paginator+json+java+ajax实现新闻分页，并能翻页和定位到哪一页，点击跳转