實現layUI的Ajax非同步分頁功能
阿新 • • 發佈:2018-11-21
1. laypage模組自行到官方檢視官方文件。任何資料都不及官方文件專業、詳細。
https://www.layui.com/doc/modules/laypage.html 官方分頁文件
https://www.layui.com/demo/laypage.html 分頁線上預覽,直接複製到點上可用,注意更換css、js檔案路徑
2.專案中用到的分頁程式碼
思路:將分頁方法封裝,將非同步請求封裝。在頁面載入完時先第一次呼叫分頁方法將資料分頁,然後再非同步請求中呼叫分頁方法,在分頁方法中的jump函式中再呼叫非同步請求方法。
程式碼如下:
1.先在jsp介面給一個分頁容器 ,將pageModel的引數封裝成全域性變數,方便js呼叫
<script type="text/javascript"><%--這裡的頁碼引數封裝成全域性變數,js可以直接呼叫--%> var count = "${pageModel.recordCount}"; var curr = "${pageModel.pageIndex}"; var limit = "${pageModel.pageSize}"; </script> <div id="pageList" style="text-align:center;"></div>
3.頁面載入完先載入頁碼。因為我的首頁資料是controller直接請求帶來的
$(function(){
//封裝分頁方法,渲染分頁,引數由jsp封裝全域性變數
//這裡的引數在jsp頁面中封裝成全域性變數。由請求帶來的資料通過EL表示式獲得
getPageList(count,curr,limit);
})
4.分頁方法:
//分頁方法 function getPageList(count,curr,limit){ layui.use(['laypage', 'layer'], function(){ var laypage = layui.laypage ,layer = layui.layer; //完整功能 laypage.render({ elem: 'pageList',//這個是容器的ID,這裡不要加"#"噢 count: count||50,//資料總數 theme: '#00A0E9', limit : limit||10,//每頁展示10條資料 curr : curr||1,//當前頁 first:'首頁', last:'尾頁', layout: ['count','prev', 'page', 'next', 'refresh', 'skip'], jump: function(data,first){//jump就是點選分頁每一個鍵都會觸發 //分頁邏輯layUI已經幫你做好了,只需要傳入引數 var obj = eval(data);//這個data包含頁碼所有引數 if(!first){//不是第一次才進入這裡 selectAjax("",obj.curr);//這個是ajax非同步請求方法 } } }); }); }
5. ajax非同步請求
function selectAjax(day,pageIndex){
layui.use(['element','form','layer','jquery','laydate','laypage'], function(){
var element = layui.element;
var form = layui.form;
var layer = layui.layer;
var laydate = layui.laydate;
var laypage = layui.laypage;
var $ = layui.jquery;
$.ajax({
type:"POST",
url:"selectAjax.html",
data:{"del":del,"pageIndex":pageIndex},
dataType:"json",
success:function(data){
var obj = eval(data);
$.each(obj.minHeadlineList,function(index,minHeadline){
//在ajax成功回撥函式中遍歷資料。給遍歷完的資料新增分頁標籤,這裡分頁方法的引數是從返回的資料帶回來的
getPageList(obj.pageModel.recordCount,obj.pageModel.pageIndex,obj.pageModel.pageSize);
})
}
});
})
}
6.controller
方法上的實體類引數(pageModel、User等)會由springMVC帶著過去。不需要再設request了
/**
*
* @param request
* @param response
* @return
*/
//第一次資料是forword轉發請求的。實體類引數會由springMVC帶著過去。不需要再設request了
@RequestMapping(value = "headline.html", method = RequestMethod.GET)
public String headline(Integer pageIndex,PageModel pageModel,HttpServletRequest request, HttpServletResponse response,Model model) {
List<Article> articles = manageService.selectHeadlineList(pageIndex,pageModel);
model.addAttribute("articles", articles);
//model.addAttribute("pagemodel", pageModel);這裡不需要再設了,springMVC已經幫我們帶過去了
return "xxxxx";
}
/**
* 查詢的Ajax
* @param pageIndex
* @param pageModel
* @param request
* @param response
* @param model
* @return
*/
//這裡是非同步請求的介面
@RequestMapping(value = "headlineAjax.html", produces="text/html;charset=UTF-8")
@ResponseBody
public String headlineAjax(Integer pageIndex,PageModel pageModel,HttpServletRequest request, HttpServletResponse response) {
List<Article> articles = manageService.selectHeadlineList( pageIndex,pageModel);
JSONObject json = new JSONObject();
json.put("articles", articles);
json.put("pageModel", pageModel);//這裡將分頁引數放到json中,這是實現非同步的關鍵之一
return json.toString();
}
7.dao層先查詢出資料的總數,設定pageModel中的pageCount
int count = jdbcTemplate.queryForObject(sqlCount, Integer.class);
pageModel.setRecordCount(count);//資料總數
Integer index = pageModel.getPageIndex();
if(index == null || index == 0) {
pageModel.setPageIndex(1);
}
int startIndex = pageModel.getFirstLimitParam();//起始行號,pageModel封裝好
int pageSize = pageModel.getPageSize();//每頁展示多少資料
8.分頁實體類
package com.headlinemanage.openlowrie.pojo;
/**
* 分頁實體
*/
public class PageModel {
/** 分頁總資料條數 */
private int recordCount;
/** 當前頁面 */
private int pageIndex = 1;
/** 每頁分多少條資料 */
private int pageSize = 10;
/** 總頁數*/
private int totalPageSize;
public int getTotalPageSize() {
return totalPageSize;
}
public void setTotalPageSize(int totalPageSize) {
this.totalPageSize = totalPageSize;
}
public int getRecordCount() {
return recordCount;
}
public void setRecordCount(int recordCount) {
this.recordCount = recordCount;
}
public int getPageIndex() {
//計算總頁數
totalPageSize = recordCount % pageSize == 0 ? recordCount / pageSize : recordCount / pageSize +1;
if(totalPageSize == 0) {
totalPageSize = 1;
}
//當前頁碼不能大於總頁碼
return pageIndex > totalPageSize ? totalPageSize : pageIndex;
}
public void setPageIndex(int pageIndex) {
this.pageIndex = pageIndex;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
//計算開始行號
public int getFirstLimitParam(){
return (this.getPageIndex()-1)*this.getPageSize() ;
}
}
靈感來自:https://www.cnblogs.com/gwzzayy/p/9450934.html
入行不久,專案用到layUI,以前沒接觸過,尚在學習中。非同步分頁已完成。如有錯誤請糾正,也請多多交流!