當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

最易懂的layui分页

發布時間：2025/3/15 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了最易懂的layui分页小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

該篇文章是在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分頁代碼如下所示:

我將其放在</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);//總頁數計算初始化為0int 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;}@Overridepublic 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,很少重寫，當然了，也不能光用，也要知道它的原理，因為它是開源的，所以我們可以深入的了解它的實現原理。

轉載于:https://www.cnblogs.com/youcong/p/9296424.html

總結

以上是生活随笔為你收集整理的最易懂的layui分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 20181127-1 附加作业软件工程
下一篇： 030 Substring with C