LayUI分頁，LayUI動態分頁，LayUI laypage分頁

LayUI分頁，LayUI動態分頁，LayUI laypage分頁，LayUIlaypage刷新當前頁

效果圖：

一、引用js依賴

主要是jquery-1.11.3.min.js 和 layui.all.js ， json2.js用來做json對象轉換的

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/layui/lay/dest/layui.all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/json2.js"></script>

二、js分頁方法封裝（分頁使用模板laytpl）

1、模板渲染

/**
* 分頁模板的渲染方法
* @param templateId 分頁需要渲染的模板的id
* @param resultContentId 模板渲染後顯示在頁面的內容的容器id
* @param data 伺服器返回的json對象
*/
function renderTemplate(templateId, resultContentId, data){
layui.use(["form","laytpl"], function{
var laytpl = layui.laytpl;
laytpl($("#"+templateId).html).render(data, function(html){
$("#"+resultContentId).html(html);
});
});
layui.form.render;// 渲染
};

2、layui.laypage 分頁封裝

/**
* layui.laypage 分頁封裝
* @param laypageDivId 分頁控制項Div層的id
* @param pageParams 分頁的參數
* @param templateId 分頁需要渲染的模板的id
* @param resultContentId 模板渲染後顯示在頁面的內容的容器id
* @param url 向伺服器請求分頁的url鏈接地址
*/
function renderPageData(laypageDivId, pageParams, templateId, resultContentId, url){
if(isNull(pageParams)){
pageParams = {
pageIndex : 1,
pageSize : 10
}
}
$.ajax({
url : url,//basePath + "/sysMenu/pageSysMenu",
method : "post",
data : pageParams,//JSON.stringify(datasub)
async : true,
complete : function (XHR, TS){},
error : function(XMLHttpRequest, textStatus, errorThrown) {
if("error"==textStatus){
error("伺服器未響應，請稍候再試");
}else{
error("操作失敗，textStatus="+textStatus);
}
},
success : function(data) {
var jsonObj;
if("object" == typeof data){
jsonObj = data;
}else{
jsonObj = JSON.parse(data);
}
renderTemplate(templateId, resultContentId, jsonObj);

//重新初始化分頁插件
layui.use(["form","laypage"], function{
laypage = layui.laypage;
laypage({
cont : laypageDivId,
curr : jsonObj.pager.pageIndex,
pages : jsonObj.pager.totalPage,
skip : true,
jump: function(obj, first){//obj是一個object類型。包括了分頁的所有配置信息。first一個Boolean類，檢測頁面是否初始載入。非常有用，可避免無限刷新。
pageParams.pageIndex = obj.curr;
pageParams.pageSize = jsonObj.pager.pageSize;
if(!first){
renderPageData(laypageDivId, pageParams, templateId, resultContentId, url);
}
}
});
});
}
});
};

3、刷新當前分頁的方法，可省略

/**
* 分頁插件刷新當前頁的數據，必須有跳轉的確定按鈕，因為根據按鈕點擊事件刷新
*/
function reloadCurrentPage{
$(".layui-laypage-btn").click;
};

三、頁面代碼

1、分頁表格及分頁控制項

<!-- 分頁表格 -->
<div class="layui-form">
<table class="layui-table">
<thead>
<tr>
<th class="w20"><input type="checkbox" name="checkBoxAll" lay-skin="primary" lay-filter="allChoose"></th>
<th class="w200">許可名稱</th>
<th class="w200">許可編碼</th>
<th class="w200">菜單名稱</th>
<th>許可鏈接</th>
</tr>
</thead>
<tbody id="page_template_body_id">
</tbody>
</table>
</div>
<!-- 分頁控制項div -->
<div id="imovie-page-div"></div>

2、分頁模板

<script id="page_template_id" type="text/html">
{{# layui.each(d.list, function(index, item){ }}
<tr>
<td><input type="checkbox" name="permissionId" lay-skin="primary" value="{{item.permissionId}}"></td>
<td>{{item.permissionName || ""}}</td>
<td>{{item.permissionCode || ""}}</td>
<td>{{item.menuName || ""}}</td>
<td>{{item.permissionUrl || ""}}</td>
</tr>
{{# }); }}
</script>

3、分頁執行代碼：

分頁參數：

function getPageParams{
var pageParams = {
pageIndex : 1,
pageSize : 2
};
pageParams.permissionName = $("input[name="permissionName"]").val;
pageParams.permissionCode = $("input[name="permissionCode"]").val;
pageParams.menuName = $("input[name="menuName"]").val;
return pageParams;
};

分頁執行方法：

function initPage{
renderPageData("imovie-page-div", getPageParams, "page_template_id",
"page_template_body_id", basePath + "/sysPermission/pageSysPermission");
};

頁面載入初始化分頁：

$(function{
initPage;
});

如果包括上面效果圖的查詢，如下：

Html頁面代碼

<div>
<form class="layui-form layui-form-pane">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">許可名稱</label>
<div class="layui-input-inline">
<input type="text" name="permissionName"
autocomplete="off" class="layui-input" placeholder="請輸入許可名稱" >
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">許可編碼</label>
<div class="layui-input-inline">
<input type="text" name="permissionCode"
autocomplete="off" placeholder="請輸入許可編碼" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">菜單名稱</label>
<div class="layui-input-inline layui-input-inline-0">
<input type="text" name="menuName"
autocomplete="off" placeholder="請選擇菜單名稱" class="layui-input">

</div>
</div>
<div class="layui-inline">
<button id="btnSubmit" class="layui-btn" lay-submit="" lay-filter="formFilter">查詢</button>
</div>
</div>
</form>
</div>

查詢語句：

$(function{
initPage;

layui.use(["form"], function{
var form = layui.form;
//監聽提交
form.on("submit(formFilter)", function(data){
initPage;
return false;
});

});
});

四、懂 jquery 插件封裝的大神可以將其封裝成獨立的分頁插件，這樣更加容易使用。我表示不太懂，^_^

?Copyright 蕃薯耀 2017年8月1日

http://fanshuyao.iteye.com/

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！