怎么使用bootstrap实现分页 bootstrap分页插件怎么获取数据
怎么使用bootstrap实现分页
1.分页: 带有页面的效果, 这里你里面可以随你的网站怎么定义都可以, 比方说. 里面不是文字, 而是一些图标,一样可以. 只不过数字能够更好的看效果. 使用样式: .pagination
2.带有上一项和下一项的翻页效果, 最简单的方式. 样式.pager
两种方法的实现, 都是需要使用ul标签, 链接是使用a。
bootstrap分页插件怎么获取数据
文章的内容是使用bootstrap-paginator进行分页，使用ajax获取后台数据、渲染。
1. 版本说明
bootstrap 3.3.2
bootstrap-paginator v1.0 github
2. 准备工程
建立动态web工程，新建index.html页面，引入bootstrap相关css js文件。
3. 简单显示
在需要显示分页的位置添加ul标签：
<ul id="pagination"> </ul>
在页面底部添加js代码：
<script> var options = { bootstrapMajorVersion: 3, alignment:center, currentPage:1, numberOfPages:5, totalPages: 10, } $(document).ready(function(){ $("#pagination").bootstrapPaginator(options) }) </script>
启动web服务，访问index.html页面，可以看到分页显示。
4. 后台准备数据
建立一个servlet，负责向前台输出json数据。
PrintWriter out = response.getWriter() String s1 = "[{"name":"lilei"},{"name":"lilei2"}]" String s2 = "{"name":"hanmeimei"}" String s3 = "{"name":"jim"}" String s4 = "{"name":"jim1"}" String s5 = "{"name":"jim2"}" String page = request.getParameter("page") String cur = null switch (page) { case "1": cur = s1 break case "2": cur = s2 break case "3": cur = s3 break case "4": cur = s4 break case "5": cur = s5 break default: break } out.print(cur) out.close()
5. 前台展示数据
前台需要先获取记录的总条数和每页容量。 <ol id="content"> </ol> <ul id="pagination" pageSize="2"> <script> var totalPages var pageSize = $("#pagination").attr("pageSize") $.ajax({ url:"/BootstrapPagination/QueryStudents", type:"POST", dataType:"json", async:false, success:function(data){ window.totalPages = Math.ceil(data /pageSize) }, error:function(error){ alert("error") } }) </script> </ul>
其中pageSize设置为2,先用post方法获取totalPages，用来初始化分页插件。
<script> var options = { bootstrapMajorVersion: 3, alignment:center, currentPage:1, totalPages: totalPages , pageUrl: function(type, page, current){ return "/BootstrapPagination/QueryStudents?page=" page }, onPageClicked: function (event, originalEvent, type, page) { originalEvent.preventDefault() originalEvent.stopPropagation() $.ajax({ url:originalEvent.target.href, type:"GET", dataType:"json", success: function(data){ $("#content li").remove() $(data).each(function(){ $("#content").append("<li>" this.name "</li>") }) }, error: function(error){ alert("error") } }) } } $(document).ready(function(){ $("#pagination").bootstrapPaginator(options) $("#pagination li:first a").trigger("click") }) </script>
运行程序即可。详细的可以参见bootstrap-paginator说明,或者去bootstrap-paginator github查阅。
工程下载bootstrap-paginator.zip jdk1.8 tomcat 8
bootstrap table客户端分页怎么用
前端代码块 function initTable(){ $(#test-table).bootstrapTable({ method: get, toolbar: #toolbar, //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下...
bootstrap 中的分页组件怎么居中
前端怎么用bootstrap做省略分页
(function($){
var ms = {
init:function(totalsubpageTmep,args){
return (function(){
ms.fillHtml(totalsubpageTmep,args)
ms.bindEvent(totalsubpageTmep,args)
})()
},
//填充html
fillHtml:function(totalsubpageTmep,args){
return (function(){
totalsubpageTmep=""
// 页码大于等于4的时候，添加第一个页码元素
if(args.currPage!=1 && args.currPage>=4 && args.totalPage!=4) {
totalsubpageTmep = "
}
/* 当前页码>4, 并且<=总页码，总页码>5，添加“···”*/
if(args.currPage-2>2 && args.currPage<=args.totalPage && args.totalPage>5) {
totalsubpageTmep = "
}
/* 当前页码的前两页 */
var start = args.currPage-2
/* 当前页码的后两页 */
var end = args.currPage 2
if((start>1 && args.currPage<4) || args.currPage==1) {
end
}
if(args.currPage>args.totalPage-4 && args.currPage>=args.totalPage) {
start--
}
for( start<=end start ) {
if(start<=args.totalPage && start>=1) {
totalsubpageTmep = "
}
}
if(args.currPage 2
totalsubpageTmep = "
}
if(args.currPage!=args.totalPage && args.currPage
}
$(".pagination").html(totalsubpageTmep)
})()
},
//绑定事件
bindEvent:function(totalsubpageTmep,args){
return (function(){
totalsubpageTmep.on("click","a.geraltTb_pager",function(event){
var current = parseInt($(this).text())
ms.fillHtml(totalsubpageTmep,{"currPage":current,"totalPage":args.totalPage,"turndown":args.turndown})
if(typeof(args.backFn)=="function"){
args.backFn(current)
}
})
})()
}
}
$.fn.createPage = function(options){
ms.init(this,options)
}
})(jQuery)