Posted in Javascript onAugust 10, 2017
实现bootstrap table服务端实现分页demo，具体内容如下
首页index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" rel="external nofollow" />
<link rel="stylesheet" href="/assets/css/bootstrap-table.min.css" rel="external nofollow" >
<script src="/assets/js/jquery-2.1.1.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/bootstrap-table.min.js"></script>
<script src="/assets/js/bootstrap-table-zh-CN.min.js"></script>
<script src="/assets/js/index.js"></script>
</head>
<body>
<!--查询窗体-->
<div class="widget-content">
<form method="post" class="form-horizontal" id="eventqueryform">
<input type="text" class="span2" name="seqNo" placeholder="编号">
<input type="text" class="span3" name="name" placeholder="姓名">
<input type="button" class="btn btn-default span1" id="eventquery" value="查询">
</form>
</div>
<div class="widget-content">
<!--工具条-->
<div id="toolbar">
<button class="btn btn-success btn-xs" data-toggle="modal" data-target="#add">添加事件</button>
</div>
<table id="eventTable"></table>
</div>
</body>
</html>
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<UserBean> 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<T> {
/** 行实体类 */
private List<T> rows = new ArrayList<T>();
/** 总条数 */
private int total;
public PageBean() {
super();
}
public List<T> getRows() {
return rows;
}
public void setRows(List<T> 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<UserBean> findByItem(int offset, int limit, String seqNo, String name) {
PageBean<UserBean> cutBean = new PageBean<UserBean>();
// 基本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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。
bootstrap table服务端实现分页效果
- Author -
starkfang声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@