<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta content="width=device-width, initial-scale=1.0"> <title>Demo</title> <link href="https://www.jb51.net/assets/css/bootstrap.min.css" /> <link href="https://www.jb51.net/assets/css/bootstrap-table.min.css" > <script src="https://www.jb51.net/assets/js/jquery-2.1.1.min.js"></script> <script src="https://www.jb51.net/assets/js/bootstrap.min.js"></script> <script src="https://www.jb51.net/assets/js/bootstrap-table.min.js"></script> <script src="https://www.jb51.net/assets/js/bootstrap-table-zh-CN.min.js"></script> <script src="https://www.jb51.net/assets/js/index.js"></script> </head> <body> <!--查询窗体--> <div> <form method="post"> <input type="text" placeholder="编号"> <input type="text" placeholder="姓名"> <input type="button" value="查询"> </form> </div> <div> <!--工具条--> <div> <button data-toggle="modal" data-target="#add">添加事件</button> </div> <table></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; } }
获取用户实现类