PageHelper分頁外掛配合bootstrap和easyui的使用
阿新 • • 發佈：2018-12-01
我這兩種方式都是介紹的後端分頁也就是每次點選上一頁下一頁都會發送請求到後端進行分頁查詢,這樣的話對於大資料量的話效率不會低,前臺分頁的話就是把所有資料查到給前端,用前端外掛進行分頁,只請求一次,就不用寫pageHelper那些了,直接給前臺返回List<實體>就可以了,然後把前臺外掛,改成client就可以了.如下圖是bootstrap前臺分頁
配合bootstrap的使用,後臺分頁
匯入jar包
<dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.1.1</version> </dependency>
前臺程式碼,需要匯入bootstrap相應的檔案,下載地址可以看完關於bootstrap的部落格,下面是初始化bootstrap表格的程式碼
<%-- Created by IntelliJ IDEA. User: liulx Date: 2018/9/3 Time: 9:04 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" > <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/table/bootstrap-table.min.css"> <title>展示使用者資訊!</title> </head> <body> <div class="container"> <br> <table id="table"></table> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="${pageContext.request.contextPath}/static/common/jquery-3.2.1.js" ></script> <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script> <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/table/bootstrap-table.min.js"></script> <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/table/locale/bootstrap-table-zh-CN.min.js"></script> <script type="text/javascript"> var option = { // 對應table標籤的id url: "<%=request.getContextPath()%>/witkeyUser/findAllUser", // 獲取表格資料的url cache: false, // 設定為 false 禁用 AJAX 資料快取， 預設為true striped: true, //表格顯示條紋，預設為false pagination: true, // 在表格底部顯示分頁元件，預設false pageList: [5,10,15, 20], // 設定頁面可以顯示的資料條數 pageSize: 5, // 頁面資料條數 pageNumber: 1, // 首頁頁碼 sidePagination: 'server', // 設定為伺服器端分頁server client前臺分頁 sortName: 'id', // 要排序的欄位 sortOrder: 'a sc', // 排序規則 columns: [ { checkbox: true, // 顯示一個勾選框 align: 'center' // 居中顯示 }, { field: 'id', // 返回json資料中的name title: '編號' // 表格表頭顯示文字 }, { field: 'username', title: '使用者名稱' }, { field: 'password', title: '密碼' }, { title: "電話", field:'iphone' }, { title: "QQ", field:'qq' }, { title: "建立使用者", field:'createName' }, { title: "建立時間", field:'createDate' }, { title: "修改使用者", field:'updateName' }, { title: "修改時間", field:'updateDate' }, { title: "備註", field:'remarks' } ], onLoadSuccess: function(){ //載入成功時執行 console.info("載入成功"); }, onLoadError: function(){ //載入失敗時執行 console.info("載入資料失敗"); } } $(function () { $("#table").bootstrapTable(option); }) </script> </body> </html>
controller接收的時候我自己封裝了一個實體類
package com.bgs.pojo; public class BootTableParam { private String sort;//排序的欄位名 id private String order;//排序的方式:desc|asc private Integer offset;//偏移量，從第幾條資料開始顯示:0 private Integer limit;//一頁顯示的條數:5 public String getSort() { return sort; } public void setSort(String sort) { this.sort = sort; } public String getOrder() { return order; } public void setOrder(String order) { this.order = order; } public Integer getOffset() { return offset; } public void setOffset(Integer offset) { this.offset = offset; } public Integer getLimit() { return limit; } public void setLimit(Integer limit) { this.limit = limit; } }
//後臺分頁
@RequestMapping("/findAllUser")
@ResponseBody
public BootStrapResult findAllUser(BootTableParam bootTableParam) {
BootStrapResult allUser = witkeyUserService.findAllUser(bootTableParam);
return allUser;
}
service分頁程式碼,因為bootstrap傳入後臺引數跟easyui不同所以這用的pageHelper這個方法來分頁查詢,只要把向資料查詢的方法插入那兩句中間,它就會自動變成分頁來查詢了,sql語句直接查詢所有就可以了.
@Override public BootStrapResult findAllUser(BootTableParam bootTableParam) { PageHelper.offsetPage(bootTableParam.getOffset(),bootTableParam.getLimit()); //從第幾個開始查 一頁查幾個 List<WitkeyUser> allUser = witkeyUserMapper.findAllUser(bootTableParam.getSort(),bootTableParam.getOrder()); PageInfo<WitkeyUser> info = new PageInfo<>(allUser); BootStrapResult result = new BootStrapResult(); result.setRows(info.getList()); result.setTotal(info.getTotal()); return result; }
返回類
package com.bgs.pojo; import java.util.List; public class BootStrapResult<T> { private Long total;//一共有多少條資料 private List<T> rows; //查詢結果 public Long getTotal() { return total; } public void setTotal(Long total) { this.total = total; } public List<T> getRows() { return rows; } public void setRows(List<T> rows) { this.rows = rows; } }
sql語句,直接查所有就可以,有排序的話加就行了
easyui進行後臺分頁,前臺跟bootstrap差不多查文件就行了
controller接收,easyui就傳後臺兩個引數一個page當前頁,一個rows一頁顯示多少條
@RequestMapping("/showUserByDeptId/{id}")
@ResponseBody
public EUDataGridResult showUserByDeptId(@PathVariable Integer id,HttpSession session,Integer page,Integer rows){
EUDataGridResult euDataGridResult = userService.showUserByDeptId(id,page,rows);
return euDataGridResult;
}
service呼叫的方法,這兒呼叫pageHelper的方法和bootstrap不同,其餘的相同
@Override
public EUDataGridResult showUserByDeptId(Integer id,Integer page,Integer rows) {
//將分頁引數傳入pageHelper物件
PageHelper.startPage(page,rows);
List<User> userList = userMapper.showUserByDeptId(id);
PageInfo<User> pageInfo = new PageInfo<User>(userList);
EUDataGridResult euDataGridResult = new EUDataGridResult();
euDataGridResult.setRows(userList);
euDataGridResult.setTotal(pageInfo.getTotal());
return euDataGridResult;
}
返回型別
package com.buba.party.utils; import java.util.List; public class EUDataGridResult { private long total; private List<?> rows; public long getTotal() { return total; } public void setTotal(long total) { this.total = total; } public List<?> getRows() { return rows; } public void setRows(List<?> rows) { this.rows = rows; } }