bootstrap java 分页_Bootstrap3的paginator分页插件示例

最近在弄这个，自己做的范例，所以分享下，也记录下心得。

首先要下载Bootstrap Paginator了，github上便有这个的开源项目提供下载：

下载的时候要注意里面的结构，其中有2个版本的bootstrap，下载后可以去找后缀“3v”的js文件和样式。

jquery版本要1.8以上，其实官方文档中这样写，我也没试过。

主要操作：2个jsp页面，一个后台类，测试数据表自己新建。

PageTest.jsp:

然后要引入需要的js和css:

//ajax获取后台数据

function initTable() {

var tbody="";

$.ajax({

type: 'POST',

dataType : "json",

async:false,

url: "table.jsp",//请求的action路径页面

data: {"flag":true},

error: function () {//请求失败处理函数

alert('请求失败');

},

success:function(data){ //请求成功后处理函数。

tbody="

设备标识号设备类别参数编码失效模式编码数据来源";

$.each(data.list, function(i, n) {

var trs = "";

trs += "

" + n.sbbsh + ""+n.sblb+""+n.csbm+""+n.sxcode+""+n.sjly+"";

tbody+=trs;

});

$("#testTable").html(tbody);

var pageCount = data.pageCount; //取到pageCount的值

var currentPage = data.CurrentPage; //得到currentPage

var options = {

bootstrapMajorVersion: 3, //版本

currentPage: currentPage, //当前页数

totalPages: pageCount, //总页数

numberOfPages: 5,

itemTexts: function (type, page, current) {

switch (type) {

case "first":

return "首页";

case "prev":

return "上一页";

case "next":

return "下一页";

case "last":

return "末页";

case "page":

return page;

}

},//点击事件，用于通过Ajax来刷新整个list列表

onPageClicked: function (event, originalEvent, type, page) {

$.ajax({

url: "table.jsp",

type: "Post",

dataType : "json",

data: "page=" + page,

success: function (data) {

tbody1="

设备标识号设备类别参数编码失效模式编码数据来源";

$.each(data.list, function(i, n) {

var trs = "";

trs += "

" + n.sbbsh + ""+n.sblb+""+n.csbm+""+n.sxcode+""+n.sjly+"";

tbody1+=trs;

});

$("#testTable").html(tbody1);

}

});

}

};

$('#example').bootstrapPaginator(options);

}

});

}

$(document).ready(function(){

initTable();

});

table.jsp页面：

String json="";//回传的Json

int pagecount=1;

if(request.getParameter("flag")!=null){

json = DemoAction.creatTable(pagecount);

System.out.println("初始:" + json);

}else{

pagecount=Integer.parseInt(request.getParameter("page"));

json =DemoAction.creatTable(pagecount);

System.out.println("刷新:" + json);

}

out.println(json);

%>

DemoAction主体方法：package com.demo;

import java.util.ArrayList;

import java.util.List;

import java.util.Map;

import net.sf.json.JSONArray;

public class DemoAction{

public static String creatTable(int page){

int pageIndex = page;//当前页

int pageSize = 2;//这里用来设置每页要展示的数据数量，建议把这个写到web.config中来全局控制

int rowCount = 0 ;

JSONArray json=null;//初始化数据

List list_demo=new ArrayList()；

try {int count=10;//获取测试表里面总条数,这里需要自己去获取

rowCount = count;//总条数

//通过计算，得到分页应该需要分几页，其中不满一页的数据按一页计算

if(rowCount%pageSize!=0)

{

rowCount = rowCount / pageSize + 1;

}

else

{

rowCount = rowCount / pageSize;

}

} catch (Exception e) {

// TODO: handle exception

}

//转成Json格式,这里Demo_list转成对象转Json如果错误，自己去找，这个很简单。

String json_data = "{\"pageCount\":"+rowCount+",\"CurrentPage\":"+pageIndex+",\"list\":" + JSONArray.fromObject( list_demo) + "}";

return json_data;

}

}

接下就可以去测试了。

效果图：

总结：

代码的质量不要在意，各位可以去优化，哈哈。测试的过程中，如果出现小问题，可能就是我剔除本身项目代码元素带来小错误，基本不会造成什么影响。另外，再说一遍，需要注意的事，bootstrap版本一定要正确,因为如果是2.x，可能定义主体的时候要用div,3.x的话ul去定义主体。希望小弟的分享能给大家带来帮助，哈哈！