該篇文章是在layui前端框架之分頁基礎上簡潔化和詳細化。
首先該示例采用的是Spring+MyBatis Plus+SpringMVC(常規的SSM框架),持久層換成MyBatis也行。
至於layui,官網為:http://www.layui.com/
所有的文檔和相關示例都可以在里面找到，layui是一個開源的前端框架，主要是由一位叫賢心的人在維護。
該框架，在碼雲或者github相關項目應用比較廣，幾乎很多開源項目直接或者間接的采用它。
比如jeesite等。當然我公司項目也采用它，主要是它的彈出層和分頁做的挺不錯的。而且很多組件對於用戶體驗也是很不錯的。
下面進入示例:
需要引入的簡單的說，只要將下列三個引入即可
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
至於放置位置可以，如果是示例工程的話，可以全部放在<head></head>之中，建議先示例工程確認沒問題，再用於生產工程。
生產工程還是老規矩，css文件放置<head</head>之中，js放在<body>結束標簽的前面。以引用的jQuery庫為最上，之所以最上，是因為引用的js文件有一部分是自己編寫的，而且該文件里面用到jQuery，如果放在引用jQuery函數的下面，就會導致jQuery函數不能用，從而導致不能顯示對應的效果。
layui分頁代碼如下所示:
<script> //裝變量的容器,可以使用多個分頁器 var dataObj = { page_enterprise : 1, page_order : 1, page_log: 1, page_log_info: 1, //選擇每頁顯示的數據條數 limit_enterprise: 10, limit_order: 20, limit_log: 30, limit_log_info: 40 } function pageQuery(pageno,companyCode) { var data = { "pageno" : pageno, "pagesize" : dataObj.limit_enterprise, "companyCode":companyCode } $.ajax({ url :ZL.url.api.getTodayOrderInfo, type : "GET", data : data, dataType : 'json', success : function(result){ //獲取后台datas數據 var apps = result.page.datas; //獲取數據總數 var dataLength=result.page.totalsize; var rows = ""; $.each(apps, function(i, app){ /** * 0 處理中 * 1 成功 * 2 失敗 * 3 取消 * 4 失效 * 5 待支付 */ //狀態 var status=app.orderStatus; //備注 var remark=app.remark; if(status=="0"){ status="處理中"; }else if(status=="1"){ status="成功"; }else if(status=="2"){ status="失敗"; }else if(status=="3"){ status="取消"; }else if(status=="4"){ status="失效"; }else if(status=="5"){ status="待支付"; } if(remark==null||remark==""){ remark=""; } rows = rows + '<tr>'; rows=rows +"<td>"+status+""; rows=rows +"<td>"+app.createTime+""; rows=rows +"<td>"+app.orderResources[0].resourceId+""; rows=rows +"<td>"+app.orderGuest[0].name+""; rows=rows +"<td>"+app.totalAmount+""; rows=rows +"<td>"+remark+""; rows = rows + '</tr>'; }); $("#appAccount_list").html(rows); //調用分頁 layui.use(['laypage', 'layer'], function() { var laypage = layui.laypage, layer = layui.layer; laypage.render({ elem: 'enterpriseOrder', count: dataLength, limit: dataObj.limit_enterprise, first: '首頁', last: '尾頁', layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], curr: dataObj.page_enterprise, theme: '#00A0E9', jump:function(obj,first){ if(!first) { //第一次不執行,一定要記住,這個必須有,要不然就是死循環 var curr = obj.curr; //更改存儲變量容器中的數據,是之隨之更新數據 dataObj.page_enterprise = obj.curr; dataObj.limit_enterprise= obj.limit; //回調該展示數據的方法,數據展示 pageQuery(curr,companyCode); } } }); }); },error:function(XMLHttpRequest, textStatus, errorThrown){ alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); } }); } </script>
我將其放在</body>上面。之所以沒有將其放入一個單獨的js文件，是因為放置單獨的js文件，會導致報錯。這個錯誤我目前還沒有找到原因，不過通過將其放入</body>前面和引入js文件是一樣的效果，只是js
文件方便管理和修改。
對應的Controller代碼如下:
/**
* 獲取當天訂單數據
* @param request
* @return
*/
@GetMapping(value="getTodayOrderInfo",produces="application/json;charset=utf-8")
@ApiOperation(value="獲取當天訂單數據",httpMethod="GET",notes="獲取當天訂單數據")
public JSONObject getTodayOrderInfo(HttpServletRequest request) {
JSONObject json = new JSONObject();
//公司編碼
String companyCode = request.getParameter("companyCode");
//獲取前台當前頁
String currentPage = request.getParameter("pageno");
//獲取前台每頁顯示數據
String pageSize = request.getParameter("pagesize");
//獲取當前時間
String today= DateUtil.today();
//將前台通過request獲取的currentPage參數轉為Integer類型
Integer pageno = Integer.parseInt(currentPage.trim());
//將前台通過request獲取的pageSize參數轉為Integer類型
Integer pagesize = Integer.parseInt(pageSize.trim());
//將條件放入Map中
Map<String,Object> conditionMap = new HashMap<String,Object>();
conditionMap.put("companyCode", companyCode);
conditionMap.put("createTime", today);
conditionMap.put("start", (pageno-1)*pagesize);
conditionMap.put("size", pagesize);
//調用獲取今日訂單數據集合方法
List<FinanceOrder> list = financeOrderService.getTodayOrderInfo(conditionMap);
//獲取今日訂單數據總數
int count = financeOrderService.getTodayOrderCount(conditionMap);
//總頁數計算 初始化為0
int totalPageCount = 0;
if ( count % pagesize == 0 ) {
totalPageCount = count / pagesize;
} else {
totalPageCount = count / pagesize + 1;
}
//判斷集合數據是否為空
if(list.size()!=0) {
Page<FinanceOrder> page = new Page<FinanceOrder>();
page.setDatas(list);
page.setTotalno(totalPageCount);
page.setTotalsize(count);
json.put("returnMsg", "獲取今日訂單數據");
json.put("page", page);
json.put("returnCode", "000000");
}else {
json.put("returnMsg", "暫無數據");
json.put("returnCode", "111111");
}
return json;
}
Page類代碼如下:
import java.util.List; /** * 分頁對象 * */ public class Page<T> { //數據 private List<T> datas; //總條數 private int totalsize; //頁碼 private int pageno; //每頁條數 private int pagesize; //總頁碼 private int totalno; public List<T> getDatas() { return datas; } public void setDatas(List<T> datas) { this.datas = datas; } public int getTotalsize() { return totalsize; } public void setTotalsize(int totalsize) { this.totalsize = totalsize; } public int getPageno() { return pageno; } public void setPageno(int pageno) { this.pageno = pageno; } public int getPagesize() { return pagesize; } public void setPagesize(int pagesize) { this.pagesize = pagesize; } public int getTotalno() { return totalno; } public void setTotalno(int totalno) { this.totalno = totalno; } @Override public String toString() { return "Page [datas=" + datas + ", totalsize=" + totalsize + ", pageno=" + pageno + ", pagesize=" + pagesize + ", totalno=" + totalno + ", getDatas()=" + getDatas() + ", getTotalsize()=" + getTotalsize() + ", getPageno()=" + getPageno() + ", getPagesize()=" + getPagesize() + ", getTotalno()=" + getTotalno() + ", getClass()=" + getClass() + ", hashCode()=" + hashCode() + ", toString()=" + super.toString() + "]"; } }
關於我為什么要用GET獲取數據最大的原因是？
增刪改，對於數據庫通常是有操作的，既然是操作的話，我必須確保操作的安全性，使用POST是最好的，因為地址欄不會顯示對應的參數，和瀏覽器不會緩存。
而Get相反，如果用GET的話，對於增刪改，瀏覽器會有記錄，同時也會在地址欄上顯示。不利於安全。
這里的安全是非修改信息。
像增刪改對於數據庫而言是修改數據。
而查只是獲取數據，絲毫不影響數據一致性和完整性。
而且Get請求是可以緩存的，既然不影響數據的完整性和一致性，我通過GET請求獲取數據，瀏覽器可以緩存，這樣的話，確保用戶體驗和減輕服務器壓力，何嘗不好呢。
關於POST和GET，我建議大家可以參考這篇博客:https://www.cnblogs.com/williamjie/p/9099940.html
該博文對於GET和POST講的比較詳細可以作為參考。
另外關於上述的JSONObject，並不想引入阿里巴巴的，而是一個比較著名的開源項目Hutool。
這個項目的特點是，將Java開發常用的工具類整理並優化為一個maven依賴，這樣大家要用到它時，只需引入該依賴，就可以利用其封裝的工具類加快開發進度，提高效率。
Wiki地址:http://hutool.mydoc.io/ 這里主要是講工具類使用詳情，需要用到的朋友們，可以作為參考。
碼雲開源地址為:https://gitee.com/loolly/hutool
該項目應用到很多開源項目和一些知名企業。包括我現在公司也在用這個，很久之前開發習慣，一項將常用工具類放入自己某個項目中，需要是直接復制過來，甚至有的時候還需要重寫。
自從有了hutool,很少重寫，當然了，也不能光用，也要知道它的原理，因為它是開源的，所以我們可以深入的了解它的實現原理。