bootstrap table服务端实现分页效果
(编辑：jimmy 日期: 2024/11/20 浏览：3 次 )
实现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="/UploadFiles/2021-04-02/jquery-2.1.1.min.js">
index.js$(function() { // 初始化表格 initTable(); // 搜索按钮触发事件 $("#eventquery").click(function() { $('#eventTable').bootstrapTable(('refresh')); // 很重要的一步，刷新url！ // console.log("/program/area/findbyItem"+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以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：AngularJs+Bootstrap实现漂亮的计算器