實現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.Driverurl=jdbc:mysql://localhost:3306/gov_social?useUnicode/=true&characterEncoding/=utf-8username=rootpassword=root
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
