bootstrap mysql分页_bootstrap table服务端实现分页效果

实现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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。