实现bootstrap table服务端实现分页demo，具体内容如下
成都创新互联公司"三网合一"的企业建站思路。企业可建设拥有电脑版、微信版、手机版的企业网站。实现跨屏营销，产品发布一步更新，电脑网络+移动网络一网打尽，满足企业的营销需求！成都创新互联公司具备承接各种类型的成都做网站、网站制作项目的能力。经过十年的努力的开拓，为不同行业的企事业单位提供了优质的服务，并获得了客户的一致好评。
首页index.html
Demo
index.js
$(function() {
// 初始化表格
initTable();
// 搜索按钮触发事件
$("#eventquery").click(function() {
$('#eventTable').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
// console.log("/program/area/findbyItem?offset="+0+"&"+$("#areaform").serialize())
$('#eventqueryform input[name=\'name\']').val('')
$('#eventqueryform input[name=\'seqNo\']').val('')
});
});
// 表格初始化
function initTable() {
$('#eventTable').bootstrapTable({
method : 'post', // 向服务器请求方式
contentType : "application/x-www-form-urlencoded", // 如果是post必须定义
url : '/bootstrap_table_demo/findbyitem', // 请求url
cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
striped : true, // 隔行变色
dataType : "json", // 数据类型
pagination : true, // 是否启用分页
showPaginationSwitch : false, // 是否显示 数据条数选择框
pageSize : 10, // 每页的记录行数（*）
pageNumber : 1, // table初始化时显示的页数
pageList: [5, 10, 15, 20], //可供选择的每页的行数（*）
search : false, // 不显示 搜索框
sidePagination : 'server', // 服务端分页
classes : 'table table-bordered', // Class样式
// showRefresh : true, // 显示刷新按钮
silent : true, // 必须设置刷新事件
toolbar : '#toolbar', // 工具栏ID
toolbarAlign : 'right', // 工具栏对齐方式
queryParams : queryParams, // 请求参数，这个关系到后续用到的异步刷新
columns : [ {
field : 'seqNo',
title : '编号',
align : 'center'
}, {
field : 'name',
title : '姓名',
align : 'center'
}, {
field : 'sex',
title : '性别',
align : 'center'
}, {
field : 'id',
title : '操作',
align : 'center',
width : '280px',
formatter : function(value, row, index) {
// console.log(JSON.stringify(row));
}
} ],
});
}
// 分页查询参数，是以键值对的形式设置的
function queryParams(params) {
return {
name : $('#eventqueryform input[name=\'name\']').val(), // 请求时向服务端传递的参数
seqNo : $('#eventqueryform input[name=\'seqNo\']').val(),
limit : params.limit, // 每页显示数量
offset : params.offset, // SQL语句偏移量
}
}
服务端 servlet
/**
* Servlet实现类
*/
public class UserFindByItemSetvlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private IUserService service = new UserServiceImpl();
public UserFindByItemSetvlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/json; charset=UTF-8");
// 得到表单数据
int offset = Integer.parseInt(request.getParameter("offset").trim());
int limit = Integer.parseInt(request.getParameter("limit").trim());
String seqNo = request.getParameter("seqNo").trim();
String name = request.getParameter("name").trim();
// 调用业务组件，得到结果
PageBean pageBean;
try {
pageBean = service.findByItem(offset, limit, seqNo, name);
ObjectMapper oMapper = new ObjectMapper();
//对象转换为json数据 ,且返回
oMapper.writeValue(response.getWriter(), pageBean);
} catch (Exception e) {
e.printStackTrace();
}
}
}
分页封装类
/** * 分页实体类 */ public class PageBean{ /** 行实体类 */ private List rows = new ArrayList (); /** 总条数 */ private int total; public PageBean() { super(); } public List getRows() { return rows; } public void setRows(List rows) { this.rows = rows; } public int getTotal() { return total; } public void setTotal(int total) { this.total = total; } }
获取用户实现类
public class UserServiceImpl implements IUserService{
/**
* sql查询语句
*/
public PageBean findByItem(int offset, int limit, String seqNo, String name) {
PageBean cutBean = new PageBean();
// 基本SQL语句
String sql = "SELECT * FROM c_userinfo where 1=1 ";
// 动态条件的SQL语句
String itemSql = "";
if (seqNo != null && seqNo.length() != 0) {
itemSql += "and SeqNo like '%" + seqNo + "%' ";
}
if (name != null && name.length() != 0) {
itemSql += "and Name like '%" + name + "%' ";
}
// 获取sql连接
Connection con = DButil.connect();
PreparedStatement ps = null;
ResultSet rs = null;
try {
ps = con.prepareStatement(sql + itemSql + "limit ?,?");
ps.setInt(1, offset);
ps.setInt(2, limit);
rs = ps.executeQuery();
while (rs.next()) {
UserBean bean = new UserBean();
bean.setSeqNo(rs.getInt("seqNo"));
bean.setName(rs.getString("name"));
bean.setSex(rs.getInt("sex"));
bean.setBirth(rs.getString("birth"));
cutBean.getRows().add(bean);
}
// 得到总记录数，注意，也需要添加动态条件
ps = con.prepareStatement("SELECT count(*) as c FROM c_userinfo where 1=1 " + itemSql);
rs = ps.executeQuery();
if (rs.next()) {
cutBean.setTotal(rs.getInt("c"));
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DButil.close(con);
if (ps != null) {
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
return cutBean;
}
}
数据库工具类
/**
* 数据库工具类
*
* @author way
*
*/
public class DButil {
/**
* 连接数据库
*
*/
public static Connection connect() {
Properties pro = new Properties();
String driver = null;
String url = null;
String username = null;
String password = null;
try {
InputStream is = DButil.class.getClassLoader()
.getResourceAsStream("DB.properties");
pro.load(is);
driver = pro.getProperty("driver");
url = pro.getProperty("url");
username = pro.getProperty("username");
password = pro.getProperty("password");
Class.forName(driver);
Connection conn = DriverManager.getConnection(url, username,
password);
return conn;
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
/**
* 关闭数据库
*
* @param conn
*
*/
public static void close(Connection con) {
if (con != null) {
try {
con.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
DB.properties文件
driver=com.MySQL.jdbc.Driver url=jdbc:mysql://localhost:3306/gov_social?useUnicode\=true&characterEncoding\=utf-8 username=root password=root
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
