一、引用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
;
});
});
});