使用layui的流加载实现滚动条分页--测试版

最新推荐文章于 2024-03-08 16:11:34 发布

959946790

最新推荐文章于 2024-03-08 16:11:34 发布

阅读量3.3k

点赞数 1

分类专栏： layui 文章标签：分页

本文链接：https://blog.youkuaiyun.com/qq_37741863/article/details/100551557

版权

使用layui的流加载实现滚动条分页

参考链接：https://my.oschina.net/yjft/blog/1518823

前端代码

需要后端返回的参数：total（总条数）
需要前端传的参数：page(当前的页码) limit（每页的条数）

功能需求：因为请求的数据量大，前端由于样式限制必须用滚动条，因此要实现滚动条滚动的时候进行分页

后端写的是0-32数字来做的分页,图片放反了。下面的是第一张，上面的是第二张

在这里插入图片描述可以参考layui流加载官网链接：https://www.layui.com/demo/flow.html

<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

959946790

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

用layui流加载实现项目中的滚动条分页功能--已经应用到项目中

qq_37741863的博客

09-06

1582

需求：选择开始时间—结束时间，点刷新按钮，时间容器中会请求到第一页的5条数据，再拉滚动条会继续请求第二页，直到结束要用到的插件请参考前一篇文章 //这是刷新按钮绑定的事件函数， $(".pointTimeCells")是时间容器，ajax请求中必须带limit和page参数，其他参数与后端协商 function refreshHistime() { var html =""; ...

layui滚动分页

qq_41730508的博客

01-09

1014

可以百度参考layui流加载。首先，分页必须传的参数就是页码，以及每页几条数据以下是我个人的代码： $(function () { scrollPage();//监听滚动分页 }); function scrollPage() { var pageNum = 1; var pageSize = 3; var questionId = ...

1 条评论您还未登录，请先登录后发表或查看评论

layui 滚动加载流加载 ajax数据分页

Khun_HWJ的博客

10-10

1255

layui.use('flow', function(){ var flow = layui.flow; flow.load({ elem: '#LAY_demo1' //流加载容器 ,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。 ,done: function(page, next){ //执行下一页的回调...

解决layui table页面一加载页面有滚动条的话表格也有滚动条

jinggaoniao的博客

01-28

1298

解决layui table页面一加载页面有滚动条的话表格也有滚动条 只要在css中加入body{overflow-y:scroll;}就可以解决了

利用layui的flow实现信息流-滚动加载

codipy的博客

02-13

6030

环境：tp3.2+layui html，设置一个包裹层 &lt;div id="pyq-content" class="pyq-content"&gt;&lt;/div&gt; js，需要注意 scrollElem 这个参数需要填写！！ layui.use('flow', function() { var $ = layui.jquery; //不用额外加载jQu

Layui treetable-lay分页处理：实现高效数据分页的秘诀

Layui treetable-lay分页处理是一种高效展示大量数据的技术，本文首先概述了其基本概念和发展历程，进而深入分析其理论基础和机制，包括核心概念、数据与视图分离的实现以及分页算法的优化策略。实践操作章节展示了...

【Springboot学习笔记】SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法

WEN_Windy的博客

08-25

7438

【Springboot学习笔记】SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法目录1.搭建环境1.1直接从网上下载SpringBoot样例网站程序1.2使用IDEA新建SpringBoot样例网站运行SpringBoot样例网站合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列...

结合Layui框架，实现SpringMVC+Spring+Mybatis,SSM整合案例CRUD（超详细代码，外加说明）

weixin_53504142的博客

05-03

1316

首先：你需要去Layui官网下载UI框架。你可能会问，为什么用Layui实现页面效果？简单来说就是：简单、好用、上手快，作为JAVA后端开发人员,Layui无疑是非常友好的，拿来即用。页面效果图：练习用的数据库表格：emp和dept 员工和部门 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210502222809482.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,te

Layui treetable-lay动态数据加载：前后端整合的高效方案

Layui treetable-lay是一种在前端开发中广泛使用的组件，它提供了高级的表格功能，特别是在动态数据展示和处理方面。本文首先介绍了Layui treetable-lay的基本概念及其与传统表格的差异。随后，文章深入探讨了前端...

layui 滚动数据_layui 滚动加载

weixin_39890517的博客

12-18

1091

直接上核心代码，其实官网介绍的很详细：var pagesize = 5;//每次请求新闻的条数flow.load({elem: '#newslist' //指定列表容器,scrollelem: '#newslist'//滚动条所在元素,done: function(page, next){ //到达临界点(默认滚动触发)，触发下一页的回调$.ajax({type: "post",datatype:...

layui使用flow流加载数据.rar

03-20

通过使用第三方开放组件layui中的流加载，信息流加载和图片懒加载两大核心支持，无论是对服务端、还是前端体验，都有非常大的性能帮助。你可能已经在太多的地方看到她们的身影了。

layui实现table加载的示例代码

10-18

今天小编就为大家分享一篇layui实现table加载的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

layui前端框架之table表数据的刷新方法

12-12

最简单的方法就是： //当前页的刷新 $(".layui-laypage-btn")[0].click(); 以上这篇layui前端框架之table表数据的刷新方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

layui数据表格横向滚动条

娓娓道来

12-24

5505

$('.layui-none', $(this.elem).next()).width($('.layui-table-header table', $(this.elem).next()).width() + 'px'); 当数据表格无数据时也有横向滚动条

layui滚动加载

壁花girl的博客

01-10

7652

下面以一个图片列表滚动加载为案例 html代码 //html页面中定义一个容器引用layui官网下载的css和js js代码 $(document).ready(function(){ layui.use('flow', function(){ var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖j

改造layui table.js 使用table.reload()后保持上次滚动条位置

LLmoe的博客

05-30

3116

项目场景：今天客户提出个需求在系统表格里面添加新数据后因为调用 table.reload() 会重载表单然后滚动条 就变成最开始前面，需要添加数据后保存滚动条位置不变问题描述 layui重载表格后会把滚动条重置到0 解决方案：参考资料：https://www.cnblogs.com/shazixu/p/11775753.html 参考上面自己改了下源码，实现效果，直接修改layui table.js的源码 //表格重载大概2090行左右自己搜索下 table.relo

Layui 动态表格单条循环滚动的实现