layui中的三种分页方式

最新推荐文章于 2024-05-06 14:03:08 发布
最新推荐文章于 2024-05-06 14:03:08 发布
阅读量6.3k 收藏 1
点赞数
分类专栏： # layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dancheng1/article/details/79085600
版权


在使用下面代码前，需要先引入layui的css和js文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui-v1.0.9/css/layui.css" media="all">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
   <legend>开门见山 ： 默认分页</legend>
  </fieldset>
  <div id="demo1">
	
  </div>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
   <legend>开启 URL hash</legend>
  </fieldset>
  <div id="demo5"></div>
 
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
   <legend>是时候看一下完整功能了！</legend>
  </fieldset>
  <div id="demo7"></div>
<script src="layui-v1.0.9/layui.js"></script>
<script>
   layui.use(['laypage', 'layer'], function(){
    var laypage = layui.laypage
    ,layer = layui.layer;
 
    laypage({
     cont: 'demo1'
     ,pages: 100 //总页数
     ,groups: 5 //连续显示分页数
    });
 
    laypage({
     cont: 'demo5'
     ,pages: 100
     ,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
     ,hash: 'fenye' //自定义hash值
    });
    laypage({
     cont: 'demo7'
     ,pages: 100
     ,skip: true
    });
   });
  </script>
</body>
</html>






dancheng_work
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui实现动态和静态分页
08-27
在实际开发中，我们可以根据自己的需要来选择使用layui的表格模块或分页模块，从而轻松地实现动态和静态分页。 layui是一个非常流行的前端框架，它提供了许多实用的功能模块，今天我们学习了layui实现动态和静态...
layui 简单实现 TABLE 分页功能
08-08
在网页开发中，数据展示往往需要配合分页功能，以提高用户体验和加载速度。本篇文章将详细讲解如何使用 layui 实现 TABLE 的分页功能。 首先，我们需要确保已引入 layui 的 CSS 和 JS 文件。在 HTML 文件的 `<head>...
layui表格之分页
qq_51615662的博客
06-14 904
就是把page和limit接收后，更改sql语句，查询所有数据的一段子集即可。
thinkphp6使用layui分页组件做分页效果
最新发布
qq_40649432的博客
05-06 362
博主用的是layui2.9.8的版本，但这个版本的分页组件是动态效果的，但我需要的是静态分页，所以我自己封装了一个生成layui的分页代码生成代码。代码如下：
Layui数据表格分页通过两种方法实现
weixin_44919186的博客
06-19 8279
//(前端来实现)分页方法一： List<Customer> list=customerDao.findCustomer(); System.out.println("list==="+list); // msg.setData("data", list); // msg.set("count", list.size()); msg.setData("d.
layui的分页实例详解
OpenSource_的博客
08-12 4539
layui的分页实例详解 layui分页官方地址:https://www.layui.com/doc/modules/laypage.html 第一步 页面引入layui的css和js 这不就不用演示了吧 第二步 在html中写入样式 第三步 写js代码 目前就...
layui table 实现分页
wenxuanyue的博客
06-08 7165
Layui是一款免费，开源，轻量级的前端cms框架，适用于企业后端,能快速上手开发，集成了常用的组件，还有完善的文档和社区。 之前写一个一个关于数据的table表格显示 并带有分页功能，实现过程遇到了很多问题，现抽空总结一下。 使用之前请先详细阅读layer的文档：http://www.layui.com/doc/modules/layer.html 首先下载最新版的layui文件： 下载完之后引入到自己的项目中，放在根目录的下面某一个地方： 然后在你要用的jsp页面上引入相应的js和cs
layui如何实现数据表格和分页？
热门推荐
冷静
06-13 1万+
要实现的效果如下,文末会贴出全部代码 1，注意的地方(url参数) 2,html注意要添加ID 3,后端代码 下面填出全部代码，方便复制粘贴 {include file="common/header"} <body class="layui-layout-body"> <fieldset class="layui-elem-fiel...
layui 前端分页 后端分页
qq_36636312的博客
11-18 3006
1，前端分页 效果图： 代码： layui.use('table', function(){ var table = layui.table; //第一个实例 table.render({ elem: '#demo' ,height: 312 ,url: '/demo/table/user/' //数据接口 ,page: true //开启分页 ,limit:2000 // 当前页数 ,limits:
layui treegrid 分页
01-03
在“layui treegrid 分页”这个主题中，我们需要关注以下几个关键知识点： 1. **layui 框架**：layui 是一个全面的前端开发框架，包括了表格、表单、按钮、弹层、图标等多个组件，并且支持模块化加载，可以方便地与...
thinkphp5+layui实现的分页样式示例
01-20
本文实例讲述了thinkphp5+layui实现的分页样式。分享给大家供大家参考，具体如下： tp5之layui分页样式 1.分页类 路径：\thinkphp\library\think\paginator\driver Layui.php <?php namespace think\paginator\driver; use think\Paginator; class Layui extends Paginator { /** * 上一页按钮 * @param string $text * @return string */ protected funct
jfinal_layui增删改查分页
05-11
jfinal_layui增删改查分页 界面优美，注释清晰欢迎下载
layUI实现前端分页和后端分页
10-16
本篇将详细介绍如何使用layUI来实现这两种分页方式。 **前端分页** 前端分页是指在浏览器端进行数据的分块加载，通常适用于数据量不大或者对实时性要求不高的场景。在layUI中，前端分页主要依赖于layui的`laypage`...
基于LayUI分页和LayUI laypage分页的使用示例
08-29
基于LayUI分页和LayUI laypage分页的使用示例 本资源摘要信息主要介绍了基于LayUI分页和LayUI laypage分页的使用示例，涵盖了LayUI分页、LayUI动态分页、LayUI laypage分页、LayUI laypage刷新当前页等知识点。 1....
layui实现简单分页
Liuss0217的博客
11-17 2178
首先引用layui和jQuery的js就不用再说了，写一下重点内容 1、定义一个id为pagebox的div，用于显示分页 <div class="commentbox" id="divlist"> <ul class="commentList" id="ul"> </ul> </div> <div id="pagesbox"></div> 2、声明当前页和总页数变量； var currPage =1; var pageCo..
layui表格自定义分页
05-14 1910
layui.use(['laypage', 'layer'], function () { var laypage = layui.laypage; //调用分页 laypage.render({ elem: 'my_page' //分页的id , count: res.re...
layui 分页表格
05-31
好的，关于 layui 分页表格，您需要在页面引入 layui 的相关文件，然后通过 layui 的表格和分页模块实现。您可以参考以下代码示例： ```html <!-- 引入 layui 相关文件 --> <link rel="stylesheet" href="/layui/css/layui.css"> <script src="/layui/layui.js"></script> <!-- 在页面中添加一个表格容器 --> <table id="table" lay-filter="table"></table> <!-- 在 JavaScript 中配置表格和分页模块 --> <script> layui.use(['table', 'laypage'], function(){ var table = layui.table; var laypage = layui.laypage; // 配置表格数据和列信息 table.render({ elem: '#table', url: '/api/data', cols: [[ {field: 'id', title: 'ID', width: 80}, {field: 'name', title: '姓名', width: 120}, {field: 'age', title: '年龄', width: 80}, {field: 'gender', title: '性别', width: 80}, {field: 'address', title: '地址', width: 200}, {field: 'phone', title: '电话', width: 120} ]], page: true, limit: 10 }); // 配置分页 laypage.render({ elem: 'page', count: 100, limit: 10, layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], jump: function(obj, first){ // obj包含当前分页的所有参数，如： // { // curr: 1, // 当前页码 // limit: 10, // 每页显示的条数 // ... // } // first表示是否首次渲染分页 if(!first){ // 非首次渲染分页时，重新加载表格数据 table.reload('table', { where: { page: obj.curr, limit: obj.limit } }); } } }); }); </script> ``` 在上面的代码中，我们首先引入了 layui 的相关文件，然后在页面中添加了一个表格容器。接着，在 JavaScript 中配置了表格数据和列信息，并启用了分页功能。最后，我们使用 layui 的分页模块来渲染分页，并在分页回调函数中重新加载表格数据。 需要注意的是，上面的代码只是一个示例，具体的实现方式可能会根据您的需求而有所不同。您可以根据自己的实际情况进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值