php laypage,LayUI分页和LayUI laypage分页区别详解
本文主要介绍了基于LayUI分页和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 laypagepId 分页控件p层的id
* @param pageParams 分页的参数
* @param templateId 分页需要渲染的模板的id
* @param resultContentId 模板渲染后显示在页面的内容的容器id
* @param url 向服务器请求分页的url链接地址
*/
function renderPageData(laypagepId, 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 : laypagepId,
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(laypagepId, 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-p", 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;
});
});
});
相关推荐:
php laypage,LayUI分页和LayUI laypage分页区别详解相关推荐
- mvc jquery ajax分页实例,jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页...
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页 简单的两个步骤即可实现分页功能 //回调里面进行业务处理 function lo ...
- layui的表单与表格使用详解
一.开始前准备 到官网下载layui需要的文件 在html文件里面导入: <script src="../layui/layui.js"></script> ...
- yii2分页的基本使用及其配置详解
作者:白狼 出处:http://www.manks.top/yii2_linkpager_pagination.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置 ...
- php yii 控件分页,Yii2分页的使用及其扩展方法详解
前言: 说明下我们本篇文章都要讲哪些内容 分页的使用,一步一步的教你怎么做 分页类LinkPager和Pagination都可以自定义哪些属性 分页类LinkPager如何扩展成我们所需要的 第一步, ...
- 八、操作系统——基本分页存储管理的基本概念(详解)
一.思考:连续分配方式的缺点? 考虑支持多道程序的两种连续分配方式: 固定分区分配:缺乏灵活性,会产生大量的内部碎片,内存的利用率很低. 动态分区分配:会产生很多外部碎片,虽然可以用"紧凑& ...
- android okgo分页,Android热门网络框架OkGo详解
OkGo简介 该库是封装了okhttp的网络框架,可以与RxJava完美结合,比retrofit更简单易用.支持大文件上传下载,上传进度回调,下载进度回调,表单上传(多文件和多参数一起上传),链式调用 ...
- 后盾人最新layUI前端框架使用详解_layUI前端框架视频教程
课程目录: 2为什么要用layUI框架 4layer组件的使用方法详解 6layDate组件的使用方法详解 8layUI的基础文件引用 10页面元素之动画.按钮 12页面元素之选项卡.进度条.表格 1 ...
- java实现layui分页_基于LayUI分页和LayUI laypage分页的使用示例
本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图: 一.引用js依赖 主要是jquery-1.11. ...
- 【Layui】使用table和laypage组件实现动态显示列和分页
脚本内容 layui.use(['table', 'laypage'], function () {var table = layui.table;var laypage = layui.laypag ...
- layui框架中用laypage与后端搭配使用做分页列表
layui框架中用laypage与后端搭配使用做分页列表 layui中文离线文档,包含html文档及layui源码 首先我们需要在layui.use中引入laypage: layui.use(['la ...
最新文章
- 整合 Google 开源 C++ 代码
- 科大星云诗社动态20210410
- 求职:网站编辑或网页美工(北京)
- 【图文详解】第一个Java程序HelloWorld详解,写Java程序需要注意什么
- 手机键鼠映射软件_吃鸡,我最专业!---盖世小鸡键鼠吃鸡套装评测
- 文字方向不见了_数字化工厂是工厂变革的方向
- 配置Apache服务器的虚拟主机
- Arcgis Javascript那些事儿(十二)——geometry service几何服务
- 《linux内核完全注释》读书笔记 2
- rj45管脚定义_RJ45接口定义
- 采访UI设计师Kiro
- 深圳南山区学位申请特殊住房需要的材料有哪些
- linux命令删除raid,甲秀之音-Linux环境下删除硬盘中残留的raid信息
- AI Studio 精品项目 | 基于Few-shot Learning实现中文科学文献学科分类
- const常量和基础数据类型
- Educational Codeforces Round 131 (Rated for Div. 2) A-D题解
- 预防死锁,检测死锁,避免死锁,解除死锁....
- 2019年,成年人的奔溃来得那么突然,但他们仍选择负重前行
- 流利说-后端开发工程师
- 【Linux 内核 内存管理】物理分配页 ⑧ ( __alloc_pages_slowpath 慢速路径调用函数源码分析 | 获取首选内存区域 | 异步回收内存页 | 最低水线也分配 | 直接分配 )
热门文章
- 如何批量将mp3压缩变小?
- 阿里巴巴全资收购中国网络配送平台饿了么
- 关于Java Web打印
- 程序设计实践之车辆信息管理系统
- Xweibo for Discuz!X1.5V1.1安装教程
- 计算机导论国内外发展,计算机导论第一章计算机发展历程.ppt
- 泛微服务器运维监控,泛微协同平台E-cology8后台维护手册-流程引擎(261页)-原创力文档...
- 自动从mysql下载到onedrive_centos7 自动上传 transmission 下载完成的文件 到 onedrive脚本...
- 混响延迟插件9个合集 – ValhallaDSP Bundle 2020 WiN 免安装版
- Audified 发布 Linda IronVerb 混响插件