layui 通过laytpl模板,以及laypage分页实现
一、引用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();
// 渲染
};
/**
* 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);
}
}
});
});
}
});
};
/**
* 分页插件刷新当前页的数据,必须有跳转的确定按钮,因为根据按钮点击事件刷新
*/
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
>
<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>
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();
});
<
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
;
});
});
});
layui 通过laytpl模板,以及laypage分页实现的更多相关文章
- LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页
LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...
- layui.laytpl 模板引擎用法
目录 layui下载地址: 最终效果: 模板引擎文档 手册地址: 以下是代码思路: layui下载地址: https://www.layui.com/ 最终效果: 模板引擎文档 手册地址: https ...
- 拿来主义:layPage分页插件的使用
布衣之谈 所谓插件,大概就是项目中可插可拔的比较小功能化的组件:这些功能组件若能力可及,自己也可以完成——也即自己造轮子,但翻看各种技术社区,相关领域的神人们往往会有更好的实现方案贡献出来,这个时候你 ...
- 如何基于layui的laytpl实现数据绑定
想了半天才想起自己园子的登录密码.可想而知,多长时间没登录了 正文一开始用layui做了几个管理系统,所以用起来觉得确实很容易上手,管理后台最常用的就是form和table以及弹窗类.layui提供的 ...
- laytpl模板——怎么使用ajax与数据交互
第一次在项目中用laytpl模板,下面是一些使用过程中的探索,希望对小伙伴们有所帮助. 注:第一次使用这个模板的小伙伴建议先去看看官网 laytpl <script type="tex ...
- doT.js模板和pagination分页应用
doT.js模板和pagination分页应用 博客中模拟了数据加载初始化的过程.doT.js渲染每一项内容的数据项.示例如下: <script id="Messtmpl" ...
- 基于layPage分页插件浅析两种分页方式
最近在开发过程中经常用到分页,今天挤出些时间来捋一捋自己的经验 在web开发中,一般显示数据列表页时,我们会用到分页控件来显示数据.采用分页一般基于两种不同的需求,一种是数据量不算很大,但是在页面展示 ...
- 记录项目中用的laypage分页代码
最终才觉得,好记性不如烂笔头,毕竟已经不是刚毕业时候的巅峰了,精力有所下降,很多时候记不住东西. 参考url:http://www.layui.com/laypage/ 直接上代码了 <scri ...
- layui之layer打开table后分页无效的解决方法
1.原代码: <body> <div id="showalladdableavms" style="display: none;width:100%&q ...
随机推荐
- RBAC权限分配
RABC:基于角色的权限访问控制(Role-Based Access Control) 一般在登录系统认证通过后,会先确定的该用户的操作权限,判断用户的后续操作是否合法! RABC至少需要三张表:用户 ...
- strom_hdfs与Sequence详解
这片博客主要是讲解storm-hdfs,Squence及它们的trident方法使用,不多说上代码: pom.xml <dependency> <groupId>org.apa ...
- linux ,mac连接, git pull error, chmod修改文件的权限/chown修改文件和目录的所有者
去项目目录下 启动服务 setsid npm start & Mac下如何用SSH连接远程Linux服务器 https://www.cnblogs.com/littleBit/p/536280 ...
- Struts2导图
- 一个茴字有三种写法——吐槽C#9.0的Records
最近是微软开了Build 2020大会,由于疫情原因,改成了在线举行,Build大会上,C#公布9.0版本. 我个人对于C#的更新向来都是喜闻乐见,乐于接受的,对于博客园上某些人天天嘲讽C#只会增加语 ...
- c# 优化代码的一些规则——优先隐式类型[一]
前言 说到底就是优先使用var,这个关键字,在c# 3.0中出现了. 首先要确认几点,一个就是var 是静态变量,而不是动态变量,也就是说使用var 你是不必去担心性能问题得, 百度百科: 1)静态存 ...
- VSCode开发Vue-代码格式化最完美设置
Vue在VsCode上面的开发,代码格式话是个老大难问题了. 有很多文章介绍Prettier四个配置方法,以及如何启用.但是结果就是:一个一个配完,还是看着难受 现在尝试出一种最完美格式化方式,分享出 ...
- [PHP学习教程 - 文件]001.高速读写大数据“二进制”文件,不必申请大内存(Byte Block)
引言:读写大“二进制”文件,不必申请很大内存(fopen.fread.fwrite.fclose)!做到开源节流,提高速度! 每天告诉自己一次,『我真的很不错』.... 加速读写大文件,在实际工作过程 ...
- ansible取出register变量中最长字符串
背景 在用ansible撰写一个etcd恢复的playbook时,有一个操作是获取etcd启动时的"initial-cluster"启动参数,该参数在etcd集群不同节点不一致,需 ...
- Java实现 LeetCode 775 全局倒置与局部倒置(分析题)
775. 全局倒置与局部倒置 数组 A 是 [0, 1, -, N - 1] 的一种排列,N 是数组 A 的长度.全局倒置指的是 i,j 满足 0 <= i < j < N 并且 A ...