当前位置: 首页 > news >正文

Layui table不使用url属性结合laypage组件实现动态分页

从后台一次性获取所有数据赋值给 Layui table 组件的 data 属性,若数据量大时,很可能会超出浏览器字符串最大长度,导致渲染数据失败。Layui table 结合 laypage 组件实现动态分页可解决此问题。

HTML增加分页组件标签

在table后增加一个用于绑定 laypage 分页组件的div容器标签:<div id="pagebar"></div>。

<div class="layui-block" style="width:100%"><table id="dataList2" lay-filter="dataList2"></table>
</div><div id="pagebar"></div>

后台分页处理

后台查询方法需要增加两个参数:page(当前页码)、pageSize(每页大小)。

在循环外增加一个变量  totalCount ,用于保存符合条件的数据总记录数。 

输出数据之前判断页数,跳出。

//分页处理
s totalCount=totalCount+1
continue:(totalCount<((page-1)*pageSize+1))||(totalCount>(page*pageSize))

JS前端分页处理

Layui table渲染之前,预先存储一些分页初始化参数。

//会话存储一些信息
sessionStorage.setItem("layPageCurr",1);	//当前页
sessionStorage.setItem("layPageCounts",0);	//总记录数
sessionStorage.setItem("layPageSize",17);	//页面大小

在Layui table的 done 回调方法中,动态渲染 laypage 分页组件。

done: function(data, curr){//动态渲染laypage分页组件layui.laypage.render({elem: 'pagebar', limit: sessionStorage.getItem("layPageSize"),	//动态赋值页面大小limits: [17,25,50,100,1000],curr: sessionStorage.getItem("layPageCurr"),	//动态赋值当前页count: sessionStorage.getItem("layPageCounts"), // 数据总数layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局jump: function(obj, first){//console.log(obj);if (first) { return; }	//首次不执行,重要!var page=obj.curr;		//当前页var pageSize=obj.limit;	//页面大小sessionStorage.setItem("layPageSize",pageSize);	//如果切换了分页大小,重新存储页面大小find(page, pageSize);}});
}

在调用后台查询方法完成后的回调方法中,存储当前页和记录总数。

sessionStorage.setItem("layPageCurr",page);
sessionStorage.setItem("layPageCounts",dataObj.counts);

效果

相关文章:

Layui table不使用url属性结合laypage组件实现动态分页

从后台一次性获取所有数据赋值给 Layui table 组件的 data 属性&#xff0c;若数据量大时&#xff0c;很可能会超出浏览器字符串最大长度&#xff0c;导致渲染数据失败。Layui table 结合 laypage 组件实现动态分页可解决此问题。 HTML增加分页组件标签 在table后增加一个用于…...

【蓝桥杯】43688-《Excel地址问题》

Excel地址问题 题目描述 Excel 单元格的地址表示很有趣&#xff0c;它可以使用字母来表示列号。比如&#xff0c; A 表示第 1 列&#xff0c; B 表示第 2 列&#xff0c; … Z 表示第 26 列&#xff0c; AA 表示第 27 列&#xff0c; AB 表示第 28 列&#xff0c; … BA 表示…...

【bodgeito】攻防实战记录

也许有一天我们再相逢&#xff0c;睁开眼睛看清楚&#xff0c;我才是英雄。 进入网站整体浏览网页 点击页面评分进入关卡 一般搭建之后这里都是红色的&#xff0c;黄色是代表接近&#xff0c;绿色代表过关 首先来到搜索处本着见框就插的原则 构造payload输入 <script>…...

Soul Preserver

Soul Preserver 护魂者 Soul Preserver - Item - 魔兽世界怀旧服WLK3.35数据库_巫妖王之怒80级魔兽数据库_wlk数据库 原来的1274法力值 圣光闪现不需要法力 圣光术原来的474法力值 但是测试数据3-5分钟有时候就触发了3次&#xff0c;节约2400蓝...

Android 折叠屏问题解决 - 展开或收起页面重建

一、问题说明 Android 折叠屏展开或收起后页面会重建&#xff0c;并重新走 onCreate onStart onResume ... 重新创建后页面的状态也会丢失&#xff0c;比如页面中是一个 RecyclerView&#xff0c;我们滑动到了第 5 个卡片的位置&#xff0c;展开后又自动滑动到了第 1 个卡片的…...

深入理解 Linux wc 命令

文章目录 深入理解 Linux wc 命令1. 基本功能2. 常用选项3. 示例3.1 统计文件的行、单词和字符数3.2 仅统计行数3.3 统计多个文件的总和3.4 使用管道统计命令输出的行数 4. 实用案例4.1 日志分析4.2 快速统计代码行数4.3 统计单词频率 5. 注意事项6. 总结 深入理解 Linux wc 命…...

半连接转内连接规则的原理与代码解析 |OceanBase查询优化

背景 在查询语句中&#xff0c;若涉及半连接&#xff08;semi join&#xff09;操作&#xff0c;由于半连接不满足交换律的规则&#xff0c;连接操作必须遵循语句中定义的顺序执行&#xff0c;从而限制了优化器根据参与连接的表的实际数据量来灵活选择优化策略的能力。为此&am…...

多进程、多线程、分布式测试支持-pytest-xdis插件

pytest-xdist是pytest测试框架的一个插件&#xff0c;它提供了多进程、多线程和分布式测试的支持&#xff0c;可以显著提高测试效率。以下是对pytest-xdist的详细介绍&#xff1a; 一、安装 要使用pytest-xdist&#xff0c;首先需要安装pytest和pytest-xdist。可以通过pip进行…...

Oracle virTualBox安装window10

一、下载windows10镜像 我下载的windows10镜像如下&#xff1a; 内部文件如下&#xff1a; 二、错误的安装方法 直接新建虚拟机&#xff0c;选择镜像文件&#xff1a; 启动虚拟机&#xff08;会一直提示没有启动设备&#xff0c;选择镜像后一直弹窗提示&#xff09; 三、正确…...

Python7-数据结构

记录python学习&#xff0c;直到学会基本的爬虫&#xff0c;使用python搭建接口自动化测试就算学会了&#xff0c;在进阶webui自动化&#xff0c;app自动化 python基础7-数据结构的那些事儿 常见的数据结构有哪些&#xff1f;线性数据结构有哪些&#xff1f;非线性数据结构有哪…...

springboot指定ssl版本连接

在application.yml配置指定 server.ssl.protocolTLSv1.2结果应用依然接受低版本如TLSv1.0的连接 可以在ie浏览器&#xff1a;设置-Internet选项-高级&#xff0c;将当前连接改为TLSv1.0进行测试 这种情况可以通过增加配置仅由TLSv1.2支持的密码处理&#xff1a; server.ssl.…...

VTK编程指南<十二>:VTK图像数据结构及图像创建与显示

数字图像是一种重要的多媒体数据&#xff0c;广泛应用于工业生产、生物医学、地质、气象等重要领域。数字图像处理技术具有重要的应用价值。图像是VTK里非常重要的一种数据结构。本章重点讲解VTK在数字图像处理应用方面的相关技术。 1、VTK图像数据结构 数字图像文件内容由两个…...

EasyGBS国标GB28181平台P2P远程访问故障排查指南:客户端角度的排查思路

在现代视频监控系统中&#xff0c;P2P&#xff08;点对点&#xff09;技术因其便捷性和高效性而被广泛应用。然而&#xff0c;当用户在使用P2P远程访问时遇到设备不在线或无法访问的问题时&#xff0c;有效的排查方法显得尤为重要。本文将从客户端的角度出发&#xff0c;详细探…...

打造智慧医院挂号枢纽:SSM 与 Vue 融合的系统设计与实施

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…...

网络编程 02:IP 地址,IP 地址的作用、分类,通过 Java 实现 IP 地址的信息获取

一、概述 记录时间 [2024-12-18] 前置文章&#xff1a;网络编程 01&#xff1a;计算机网络概述&#xff0c;网络的作用&#xff0c;网络通信的要素&#xff0c;以及网络通信协议与分层模型 本文讲述网络编程相关知识——IP 地址&#xff0c;包括 IP 地址的作用、分类&#xff…...

如何使用Python WebDriver爬取ChatGPT内容(完整教程)

大背景 虽然我们能用网页版chatGPT来聊天、写文章&#xff0c;但是我们采集大量的内容&#xff0c;就得不断地手动输入提问来获取答案&#xff0c;并且将结果复制到数据库来保存。如果整个过程能使用程序来做自然要节省很多的人力&#xff0c;精力和时间。 Python webdirver …...

WSL切换默认发行版

查看适用于wsl的子系统有哪些: wslconfig /list 设置wsl的默认发行版 wslconfig /setdefault Ubuntu-20.04...

全志H618 Android12修改doucmentsui功能菜单项

背景: 由于当前的文件管理器在我们的产品定义当中,某些界面有改动的需求,所以需要在Android12 rom中进行定制以符合当前产品定义。 需求: 在进入File文件管理器后,查看...功能菜单时,有不需要的功能菜单,需要隐藏,如:新建窗口、不显示的文件夹、故代码分析以及客制…...

移动网络(2,3,4,5G)设备TCP通讯调试方法

背景&#xff1a; 当设备是移动网络设备连接云平台的时候&#xff0c;如果服务器没有收到网络数据&#xff0c;移动物联设备发送不知道有没有有丢失数据的时候&#xff0c;需要一个抓取设备出来的数据和服务器下发的数据的方法。 1.服务器系统是很成熟的&#xff0c;一般是linu…...

网络安全概论——入侵检测系统IDS

一、入侵检测的概念 1、入侵检测的概念 检测对计算机系统的非授权访问对系统的运行状态进行监视&#xff0c;发现各种攻击企图、攻击行为或攻击结果&#xff0c;以保证系统资源的保密性、完整性和可用性识别针对计算机系统和网络系统或广义上的信息系统的非法攻击&#xff0c…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

十九、【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建 前言准备工作第一部分:回顾 Django 内置的 `User` 模型第二部分:设计并创建 `Role` 和 `UserProfile` 模型第三部分:创建 Serializers第四部分:创建 ViewSets第五部分:注册 API 路由第六部分:后端初步测…...