Layui分页_pagehelper分页使用

Layui分页_pagehelper分页使用本文介绍了LayUI分页,LayUI动态分页,LayUIlaypage分页,LayUIlaypage刷新当前页,分享给大家,具体如下:效果图:一、引用js依赖主要是jquery-1.11.3.min.js和layui.all.js,json2.js用来做json对象转换的二、js分页方法封装(分页使用模板laytpl)1、模板渲染/***分页模板的渲染方法*@paramtemp…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下:

效果图:

70c3129121d0237d827a9609c04c2ea6.png

一、引用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.phttp://www.cppcns.comager.pageIndex,

pages : jsonObj.pager.totalPage,

skip : true,

jump: function(obj, first){//obj是一个objec

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页面代码

许可名称

查询

查询语句:

$(function(){

initPage();

layui.use([‘form’], function(){

var form = layui.form();

//监听提交

formon(‘submit(formFilter)’, function(data){

initPage();

return false;

});

});

});

四、懂 jquery 插件封装的大神可以将其封装成独立的分页插件,这样更加容易使用。我表示不太懂,^_^

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

本文标题: 基于LayUI分页和LayUI laypage分页的使用示例

本文地址: http://www.cppcns.com/ruanjian/java/198431.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/219973.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • findindex方法_find函数怎么用

    findindex方法_find函数怎么用findIndex(fn)方法:(注意:1.不需要return2.参数fn就是检索条件)返回在数组中查找符合条件第一个元素的index索引。vararr=[12,16,18,20]letindex=arr.findindex((item)=>{ item>=18})//打印index为2…

    2022年10月30日
  • Docker 离线安装_安装下载

    Docker 离线安装_安装下载Docker是在Linux容器里运行应用的开源工具,是一种轻量级的”虚拟机”。Docker的Logo设计为蓝色鲸鱼,拖着许多集装箱。如下图,鲸鱼可以看作宿主机,而集装箱可以理解为相互隔离的容器。每个集装箱中都包含自己的应用程序

  • 类 InputStreamReader[通俗易懂]

    类 InputStreamReader[通俗易懂]InputStreamReader 是字节流通向字符流的桥梁:它使用指定的 charset 读取字节并将其解码为字符。它使用的字符集可以由名称指定或显式给定,或者可以接受平台默认的字符集。每次调用 InputStreamReader 中的一个 read() 方法都会导致从底层输入流读取一个或多个字节。要启用从字节到字符的有效转换,可以提前从底层流读取更多的字节,使其超过满足当前读取操作所需的字节。

  • 最小二乘法详细推导过程

    最小二乘法详细推导过程转载自:http://blog.csdn.net/marsjohn/article/details/54911788在数据的统计分析中,数据之间即变量x与Y之间的相关性研究非常重要,通过在直角坐标系中做散点图的方式我们会发现很多统计数据近似一条直线,它们之间或者正相关或者负相关。虽然这些数据是离散的,不是连续的,我们无法得到一个确定的描述这种相关性的函数方程,但既然在直角坐标系中数据分布接近一…

  • linux fstab 远程,linux下fstab文件详解[通俗易懂]

    linux fstab 远程,linux下fstab文件详解[通俗易懂]1./etc/fstab文件介绍/etc/fstab是用来存放文件系统的静态信息的文件。位于/etc/目录下,可以用命令less/etc/fstab来查看,如果要修改的话,则用命令vi/etc/fstab来修改。当系统启动的时候,系统会自动地从这个文件读取信息,并且会自动将此文件中指定的文件系统挂载到指定的目录。2.fstab文件示例以下是CentOS5.Xfstab文件:#LABEL…

  • gbdt算法_dlt算法

    gbdt算法_dlt算法GBDT算法参数详解

    2022年10月11日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号