一、引用js依賴
jquery-1.11.3.min.js , layui.all.js, json2.js
二、js分頁方法封裝（分頁使用模板laytpl）
1、模板渲染
/**
* 分頁模板的渲染方法
* @param templateId 分頁需要渲染的模板的id
* @param resultContentId 模板渲染后顯示在頁面的內容的容器id
* @param data 服務器返回的json對象
*/
function
renderTemplate(templateId, resultContentId, data){
layuiuse([
'form'
,
'laytpl'
],
function
(){
var
laytpl = layui.laytpl;
laytpl($(
"#"
+templateId).html()).render(data,
function
(html){
$(
"#"
+resultContentId).html(html);
});
});
layui.form().render();
// 渲染
};
2、layui.laypage 分頁封裝
/**
* layuilaypage 分頁封裝
* @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();
};
三、頁面代碼
<!-- 分頁表格 -->
<
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();
//監聽提交
formon(
'submit(formFilter)'
,
function
(data){
initPage();
return
false
;
});
});
});