1. 程式人生 > >實現layUI的Ajax非同步分頁功能

實現layUI的Ajax非同步分頁功能

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,以前沒接觸過,尚在學習中。非同步分頁已完成。如有錯誤請糾正,也請多多交流!