Bootstrap 分页插件 ajax获取数据显示

Bootstrap 分页插件 ajax获取数据显示

标签（空格分隔）： bootstrap

Bootstrap 分页插件 ajax获取数据显示

版本说明

准备工程

简单显示

后台准备数据

前台展示数据

文章的内容是使用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