ajax bootstrap 进度条,Bootstrap 分页插件 ajax获取数据显示

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

标签(空格分隔)： bootstrap

文章的内容是使用bootstrap-paginator进行分页，使用ajax获取后台数据、渲染。

1. 版本说明

bootstrap 3.3.2

bootstrap-paginator v1.0 github

2. 准备工程

建立动态web工程，新建index.html页面，引入bootstrap相关css js文件。

3. 简单显示

在需要显示分页的位置添加ul标签：

在页面底部添加js代码：

var options = {

bootstrapMajorVersion: 3,

alignment:'center',

currentPage:1,

numberOfPages:5,

totalPages: 10,

};

$(document).ready(function(){

$("#pagination").bootstrapPaginator(options);

});

启动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. 前台展示数据

前台需要先获取记录的总条数和每页容量。

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");

}

});

其中pageSize设置为2,先用post方法获取totalPages，用来初始化分页插件。

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("

"+this.name+"");

});

},

error: function(error){

alert("error");

}

});

}

};

$(document).ready(function(){

$("#pagination").bootstrapPaginator(options);

$("#pagination li:first a").trigger("click");

});