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)
blank

相关推荐

  • java swing入门教程_java swing基础(菜鸟教程学习)

    java swing入门教程_java swing基础(菜鸟教程学习)JavaSwing介绍1.Swing是一个为java世纪的GUI工具包2.Swing是JAVA基础类的一部分3.Swing包括了图形用户界面(GUI)器件如:文本框,按钮,分隔窗格和表4个器件4.Swing提供许多比AWT更好的屏幕显示元素,用纯java写成。AWT是JFC的一部分,支持可更换的面板和主题(各种操作系统默认的特有主题),然而并不是真的使用原生平台提供的设备,而是仅仅在表面上模仿…

  • 随 机 数 算 法

    随 机 数 算 法一、随机数概述在password技术中,随机序列是非常重要的,比方密钥产生、数字签名、身份认证和众多的password学协议等都要用到随机序列。所以产生高质量的随机数序列对信息的安全性具有十分关键的数

  • java %08d_总结Java中String.format()的使用[通俗易懂]

    java %08d_总结Java中String.format()的使用[通俗易懂]快速入门介绍Java中强大的String.format()前言从Java5.0开始,String类新增了一个强大的字符串格式化方法format()。这个方法到现在用的人还是不多,实在是一种浪费。本文带你快速过一遍这个方法的功能,将来你要用到格式化文本的时候,可能就不需要再借用第三方类库或自己去实现了。首先看一个简单例子:Stringformatted=String.format(“…

  • QQ浏览器谷歌版吾爱破解(QQ浏览器最新谷歌版)

    ubuntu软件安装大全本文基于ubuntu16.04系统本文提供下载地址:安装包地址:https://github.com/weiguow/ubuntu-software.gitdeepin-wine地址:https://github.com/weiguow/deepin-wine-ubuntu.git1.Chrome浏览器sudowgethttps://repo.fdzh.o…

  • SQL学习(一):months_between日期函数

    SQL学习(一):months_between日期函数日期函数months_between的用法:MONTHS_BETWEEN(date1,date2)用于计算date1和date2之间有几个月。如果date1在日历中比date2晚,那么MONTHS_BETWEEN()就返回一个正数。如果date1在日历中比date2早,那么MONTHS_BETWEEN()就返回一个负数。如果date1和date2日期一样,那么MONTHS_BETWEEN()就返回一个0。案例SQL>selectmonths_between(to_date(

  • C语言学习——结构体数据类型

    C语言学习——结构体数据类型本章节比较简单不做过多说明,直接上案例,如有疑问,欢迎留言。结构体作为函数参数#include <stdio.h>#include <string.h>struct Books{ char name[50]; char author[50]; int book_id;};// 函数声明void printBook(struct Books *b…

发表回复

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

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