laypage分页java例子_基于LayUI分页和LayUI laypage分页的使用示例
本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下:
效果图:
一、引用js依赖
主要是jquery-1.11.3.min.js 和 layui.all.js , json2.js用来做json对象转换的
二、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();
};
三、页面代码
1、分页表格及分页控件
许可名称许可编码菜单名称许可链接
2、分页模板
{{# layui.each(d.list, function(index, item){ }}
{{item.permissionName || ''}}{{item.permissionCode || ''}}{{item.menuName || ''}}{{item.permissionUrl || ''}}
{{# }); }}
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页面代码
许可名称
autocomplete="off" class="layui-input" placeholder="请输入许可名称" >
许可编码
autocomplete="off" placeholder="请输入许可编码" class="layui-input">
菜单名称
autocomplete="off" placeholder="请选择菜单名称" class="layui-input">
查询
查询语句:
$(function(){
initPage();
layui.use(['form'], function(){
var form = layui.form();
//监听提交
formon('submit(formFilter)', function(data){
initPage();
return false;
});
});
});
四、懂 jquery 插件封装的大神可以将其封装成独立的分页插件,这样更加容易使用。我表示不太懂,^_^
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
laypage分页java例子_基于LayUI分页和LayUI laypage分页的使用示例相关推荐
- laypage分页java例子_laypage分页插件的使用
laypage是用于分页的插件,该插件通过js请求分页数据 1.载入js文件 2.在页面中显示分页信息的地方插入标记 3.添加js var url = '{:url("article/lis ...
- springboot分页展示功能_基于SpringBoot从零构建博客网站 - 分页显示文章列表功能...
显示文章列表一般都是采用分页显示,比如每页10篇文章显示.这样就不用每次就将所有的文章查询出来,而且当文章数量特别多的时候,如果一次性查询出来很容易出现OOM异常. 后台的分页插件采用的是mybati ...
- layui实现文件压缩上传_基于SSM框架、Layui的多文件上传、包括图片,压缩包,音频等文件(与数据库挂钩) - 爱秧博客...
写在前面:当初为了实现一个多文件上传可是费了一番功夫,经过我日日夜夜的百度咨询,写了好几种方法,最终还是没能解决问题.我可以很负责任的告诉你,你去百度上不管你形容有多好,只要是涉及多文件,就会查到Mu ...
- python关于二手房的课程论文_基于python爬取链家二手房信息代码示例
基本环境配置 python 3.6 pycharm requests parsel time 相关模块pip安装即可 确定目标网页数据 哦豁,这个价格..................看到都觉得脑阔 ...
- java 状态机_基于 RAFT 一致性算法的 Java 实现 SOFAJRaft
SOFAJRaft 是一个基于 RAFT 一致性算法的生产级高性能 Java 实现,支持 MULTI-RAFT-GROUP,适用于高负载低延迟的场景. 使用 SOFAJRaft 你可以专注于自己的业务 ...
- 20万数据 sql 快还是 java快?_基于SpringBoot2.0开发的,轻量级的,前后分离Java开发平台...
项目说明 MintLeaf-Fast是一个基于SpringBoot2.0开发的,轻量级的,前后端分离的Java快速开发平台 开箱即用,节省开发时间,提升开发效率,能够快速开发项目并交付的接私活利器 支 ...
- 二维几何变换java代码_基于Batik的SVG应用: 关于几何变换
本文是作者在 SVGGIS 系统的开发实践过程中关于 SVG 坐标转换的总结.在描述 SVG 坐标变换原理的同时,使用 Apache Batik 项目实现了相关例子. SVG 是一种用 xml 语言来 ...
- 租车java 查询_基于java实现租车管理系统
概述 基于java + swing + JFrame 的图书馆管理系统,租车,还车,管理员管理用户,付款等. 部分代码 public class Login extends JFrame { priv ...
- java r$_基于javacv的人脸检测Demo
[实例简介] 基于javacv的人脸检测Demo,参考文章:http://blog.csdn.net/viviwen123/article/details/6386302#reply [实例截图] [ ...
- 成绩查询系统源java代码_基于jsp的成绩查询系统-JavaEE实现成绩查询系统 - java项目源码...
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的成绩查询系统, 该项目可用各类java课程设计大作业中, 成绩查询系统的系统架构分为前后台两部分, 最终实现在线上 ...
最新文章
- 概述自动机器学习(AutoML)
- Service Manger的初始化分析
- 二维方向图matlab程序,二维点源阵方向图,阵因子matlab
- flash socket 发对象问题
- 判断unsigned long long乘法溢出_信息安全课程17:缓冲区溢出2
- 包概念与__init__注意事项
- 黑色自适应简约个人主页引导页HTML源码
- Android Camera (13)---MTK平台相机插值修改
- 2021高考分数文科成绩查询,2021高考分数线预测 文科理科分数线是多少
- NSRegularExpression iOS自带的正则表达式
- Spring中的InitializingBean接口
- 2013,安全管理平台(SOC)业务的重新崛起
- 理解OpenShift(6):集中式日志处理
- dnf远古深渊出传说详解
- C语言顺序表的12个基本操作(增删改查等)
- 天津大学学硕和专硕的区别_专硕学硕的区别你弄明白了吗?听听学长学姐怎么说...
- 禾赛科技李一帆:别让无人车的未来被一个小传感器憋死
- CloudNative:云原生(分布式云)的简介(发展演变/为什么需要/优势价值/安全/对比传统企业应用)、四大核心技术、CNCF云原生交互景观、云原生技术的使用经验及方法之详细攻略
- 项目管理之如何进行项目干系人管理
- 2021Java面经:最便宜java培训机构