layui(5)——内置模块分页模块

这篇具有很好参考价值的文章主要介绍了layui(5)——内置模块分页模块。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

模块加载名称:laypage

laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Document</title>
    <!-- 引入核心css文件 -->
    <link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css">
    <!-- 引入核心js文件 -->
    <script src="./layui-v2.6.8/layui/layui.js"></script>

</head>

<body>
    <div id="test1"></div>
    <script>
    layui.use('laypage', function(){
      var laypage = layui.laypage;
      
      //执行一个laypage实例
      laypage.render({
        elem: 'test1', //注意,这里的 test1 是 ID,不用加 # 号
        count: 50 //数据总数,从服务端得到
      });
    });

    </script>

</body>
<script>


</script>

</html>

layui(5)——内置模块分页模块

基础参数选项

通过核心方法:laypage.render(options) 来设置基础参数。由于使用非常简单,本篇直接罗列核心接口的参数选项

参数选项 说明 类型 默认值
elem 指向存放分页的容器,值可以是容器ID、DOM对象。如:
1. elem: 'id' 注意:这里不能加 # 号
2. elem: document.getElementById('id')
String/Object -
count 数据总数。一般通过服务端得到 Number -
limit

每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。

Number 10
limits 每页条数的选择项。如果 layout 参数开启了 limit,则会出现每页条数的select选择框 Array [10, 20, 30, 40, 50]
curr

起始页。一般用于刷新类型的跳页以及HASH跳页。如:

    //开启location.hash的记录
    
laypage.render({
      elem: 'test1',
      count: 500,
      curr: location.hash.replace('#!fenye=', '') //获取起始页
      ,hash: 'fenye' //自定义hash值
    });          
                  
Number 1
groups 连续出现的页码个数 Number 5
prev 自定义“上一页”的内容,支持传入普通文本和HTML String 上一页
next 自定义“下一页”的内容,同上 String 下一页
first 自定义“首页”的内容,同上 String 1
last 自定义“尾页”的内容,同上 String 总页数值
layout 自定义排版。可选值有:count(总条目输区域)、prev(上一页区域)、page(分页区域)、next(下一页区域)、limit(条目选项区域)、refresh(页面刷新区域。注意:layui 2.3.0 新增) 、skip(快捷跳页区域) Array ['prev', 'page', 'next']
theme 自定义主题。支持传入:颜色值,或任意普通字符。如:
1. theme: '#c00'
2. theme: 'xxx' //将会生成 class="layui-laypage-xxx" 的CSS类,以便自定义主题
String -
hash 开启location.hash,并自定义 hash 值。如果开启,在触发分页时,会自动对url追加:#!hash值={curr} 利用这个,可以在页面载入时就定位到指定页 String/Boolean false

1. limit 参数

    layui.use('laypage', function(){
      var laypage = layui.laypage;
      
      //执行一个laypage实例
      laypage.render({
        elem: 'test1', //注意,这里的 test1 是 ID,不用加 # 号
        count: 150,//数据总数,从服务端得到
        limit: 15 //可以得出分页数为150/15=10
      });
    });

layui(5)——内置模块分页模块文章来源地址https://www.toymoban.com/news/detail-491634.html

到了这里,关于layui(5)——内置模块分页模块的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • layui各种事件无效(例如表格重载或 分页插件按钮失效)的解决方法

    下图是我一个系统的操作日志,在分页插件右下角嵌入了一个导出所有数据的按钮 ,代码没有任何问题,点击导出按钮却失效   排查之后,发现表格标签table定义了ID又定义了lay-filter,因我使用的layui从2.7.6升级到2.8.11,升级2.8+之后新增了ID,与原本的lay-filter功能基本一致,

    2024年02月15日
    浏览(46)
  • com.microsoft.sqlserver.jdbc.SQLServerException: ‘version‘ 不是可以识别的 内置函数名称

    org.apache.ibatis.exceptions.PersistenceException:  ### Error querying database.  Cause: org.springframework.jdbc.CannotGetJdbcConnectionException: Failed to obtain JDBC Connection; nested exception is com.microsoft.sqlserver.jdbc.SQLServerException: \\\'version\\\' 不是可以识别的 内置函数名称。 ### The error may exist in file [D:softwareJavaPro

    2024年02月05日
    浏览(57)
  • SpringBoot框架——8.MybatisPlus常见用法(常用注解+内置方法+分页查询)

    1.MybatisPlus常用注解:         1.1 当数据库、表名和字段名和实体类完全一致时无需加注解,不一致时:         @TableName指定库名         @TableId指定表名         @TableField指定字段名         1.2 自增主键:         @TableId(type=IdType.AUTO)         private Long id;        

    2024年04月26日
    浏览(40)
  • layui(6)——上传文件模块

    到此为止!!!! 其他可以参考layui学习文档   Layui 开发使用文档 - 入门指南

    2024年02月11日
    浏览(40)
  • Layui菜单模块

                                     今天继续有我给大家layui菜单在web中的应用           Layui是一个轻量级的前端框架,提供了丰富的UI组件和便捷的开发方式,而菜单模块是Layui中的一个核心组件之一,用于创建和管理网页导航菜单。 Layui菜单模块是一种用于创建网页导

    2024年02月15日
    浏览(37)
  • layui框架学习(42:文件上传模块-上)

      之前学习asp.net core编程入门教程时结合layui测试过文件上传《基于ASP.Net Core和Layui的多文件上传》,但没有认真学习过layui的文件上传模块,本文开始,计划分两章学习并记录文件上传模块中的属性、事件及函数的使用方法。   layui中的文件上传模块支持单文件上传、多

    2024年02月11日
    浏览(46)
  • layui框架学习(45: 工具集模块)

      layui的工具集模块util支持固定条、倒计时等组件,同时提供辅助函数处理时间数据、字符转义、批量事件处理等操作。   util模块中的fixbar函数支持设置固定条(2.7版本的帮助文档中叫固定块),是指固定在页面一侧的工具条元素,不随页面滚动条滚动,默认在页面右

    2024年02月07日
    浏览(53)
  • mybatis分页、延迟加载、立即加载、一级缓存、二级缓存

    分类 : 使用Limit,来进行分页;物理分页 使用RowBounds集合来保存分页需要数据,来进行分页;逻辑分页;本质是全查,只是显示部分 使用分页插件来进行分页;物理分页 方式一: 方式二: 方式三: 首先导入两个jar包: 配置插件: 调用: 字段 含义 pageNum 当前页的页码 pa

    2024年01月18日
    浏览(53)
  • LayUi 树形组件tree 实现懒加载模式,展开父节点时异步加载子节点数据

    如题。 效果图:   //lazy属性为true,点开时才加载   引用代码: tree-define.js文件: 重写的tree.js: 扩展这个tree.js的原作者链接:https://www.cnblogs.com/han1982/p/11535627.html#!comments 【HG-Layui-UI通用后台管理框架V1.0版】 下载地址: https://www.cnblogs.com/han1982/p/12003454.html

    2024年02月15日
    浏览(46)
  • 小程序分页加载数据

    data: { list: [],   //会员列表         total: 0,    //分页总数         page: 1,    //分页记录数         pagesize: 10,   //分页大小    onRefresh: true, }    /*请求后台获取数据 */    getList: function () {     var that=this;     var onRefresh = that.data.onRefresh;//fa

    2024年02月05日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包