bootstrap table服务端实现分页效果
时间:2019-03-31
本文章向大家介绍bootstrap table服务端实现分页效果,主要包括bootstrap table服务端实现分页效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
实现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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Android点击EditText文本框之外任何地方隐藏键盘的解决办法
- Spark 1.4为DataFrame新增的统计与数学函数
- 《Redis设计与实现》读书笔记(三十三) ——Redis排序命令sort的实现
- 高通HAL层之Sensor HAL
- Android Data Binding(数据绑定)用户指南
- Android 禁止Viewpager左右滑动功能
- 高通Audio中ASOC的machine驱动
- 《Redis设计与实现》读书笔记(三十五) ——Redis 二进制位数组及SWAR汉明重量算法
- Android TabWidget底部显示
- 《Redis设计与实现》读书笔记(三十六) ——Redis 慢查询日志实现
- 概率学中的随机变量与分布
- 神马?SQL竟然可以解脑筋急转弯的题目?
- android中一些特殊字符(如:←↑→↓等箭头符号)的Unicode码值
- 基于SpringBoot的任务管理平台v1.0正式发布
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Go by Example 中文版: 时间
- Go by Example 中文版: 时间戳
- Day14.模块&包
- 关于 JavaScript 错误处理的最完整指南(下半部)
- 踩坑记录 | Android 逆向之如何处理 Kali Nat 模式无法上网?
- gson 替换 fastjson 引发的线上问题分析
- P1003 铺地毯
- 花10分钟写一个 Python 脚本,搞定了初中老师一个下午的工作
- 微信小程序导航栏页面滑动切换
- SwiftUI:本地通知
- 领导大怒:建表不加主键的都是耍流氓
- (美团)巧用数组下标,轻轻松松找出所有元素
- Docker容器网络-基础篇
- 【Java面试总结】常用框架之Spring
- 【学以致用】C++操作Redis