bootstrap-paginator+json+java+ajax实现新闻分页，并能翻页和定位到哪一页，点击跳转
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap-paginator+json+java+ajax实现新闻分页，并能翻页和定位到哪一页，点击跳转相关的知识，希望对你有一定的参考价值。
现在用bootstrap做了个站，但是新闻模块的展示部分搞不出来，求大侠指教
参考技术A 我给你个项目例子吧！追问能不能发我邮箱呢，百度知道老是提示“
知道已支持文件上传、下载功能。
知道网友会将您需要的文件上传到知道，您可以在线预览和下载。
为了您的信息安全，请不要留下您的个人邮箱。
”提示不能留邮箱，我QQ号是1037609818,麻烦发我邮箱下，谢谢！
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+json+java+ajax实现新闻分页，并能翻页和定位到哪一页，点击跳转的主要内容，如果未能解决你的问题，请参考以下文章
bootstrap-paginator + ajax 实现动态翻页功能
bootstrap-paginator分页技术，假设有5按钮1.2.3.4.5，我这边情况是：点下一页