• Layui快速入门之第十四节 分页

    目录

    一：基本用法

    API

    渲染

    属性

    二：自定义主题 

    三：自定义文本 

    四：自定义排版

    五：完整显示 

    一：基本用法

              分页组件 laypage 提供了前端的分页逻辑，使得我们可以很灵活处理不同量级的数据，从而提升渲染效率

    1.  
    2. html>
    3. <html>
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>分页title>
    7.   <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
    8. head>
    9. <body>
    10. <div id="test">div> 
    11. <script src="//res.layui.com/layui/dist/layui.js">script>
    12. <script>
    13. layui.use('laypage', function(){
    14.   var laypage = layui.laypage;
    15.   
    16.   //执行一个laypage实例
    17.   laypage.render({
    18.     elem: 'test' //注意，这里的 test 是上面的 ID，不用加 # 号
    19.     ,count: 100 //数据总数，从服务端得到
    20.     ,limit: 10 //默认显示10条
    21.   });
    22. });
    23. script>
    24.  
    25. body>
    26. html>

    API

    API描述
    var laypage = layui.laypage获得 laypage 模块。
    laypage.render(options)laypage 组件渲染，核心方法。

    渲染

    laypage.render(options);

    属性

    属性名描述类型默认值
    elem

    绑定分页容器。值可以是容器 id 或 DOM 对象。如：

    • elem: 'id' 注意：这里不能加 # 号
    • elem: document.getElementById('id')
    		string
    DOM    		-
    count

    数据总数。一般通过后端得到

    		number-
    limit

    每页显示的条数。

    		number

    10

    limits

    每页条数的选择项。 若 layout 参数开启了 limit ，则会出现每页条数的 select 选择框

    		array

    [10,…,50]

    curr

    初始化当前页码。

    		number

    1

    groups

    连续出现的页码数量

    		number

    5

    prev

    自定义“上一页”的内容，支持传入普通文本和 HTML

    		string

    上一页

    next

    自定义“下一页”的内容，用法同上。

    		string

    下一页

    first

    自定义“首页”的内容，用法同上。

    		string

    1

    last

    自定义“尾页”的内容，用法同上。

    		string

    自动获得

    layout

    自定义分页功能区域排版。可自由排列，可选值有：

    • count 数据总数区域
    • prev 上一页区域
    • page 分页区域
    • next 下一页区
    • limit 条目选项区域
    • refresh 页面刷新区
    • skip 快捷跳页区
    		array

    查看默认值

    theme

    自定义主题。支持传入：颜色值或任意普通字符。如：

    • theme: '#c00' 直接设置当前页按钮背景色
    • theme: 'xxx' 会生成 class="layui-laypage-xxx" 的 CSS 类，以便自定义主题
    		string-
    hash

    设置 hash 名称。设置该属性后，点击分页将会自动对当前 url 追加：#{hash}={curr}，从而在页面刷新时初始化当前页码。#详细用法参考示例

    		string-

    回调函数

    jump

    分页跳转后的回调函数。函数返回两个参数：

    • 参数 obj : 当前分页相关的所有选项值
    • 参数 first : 是否首次渲染，一般用于初始加载的判断
     
    
    1. laypage.render({
    2. elem: 'id',
    3. count: 70, // 数据总数，从后端得到
    4. jump: function(obj, first){
    5. console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
    6. console.log(obj.limit); // 得到每页显示的条数
    8. // 首次不执行
    9. if(!first){
    10. // do something
    11. }
    12. }
    13. });
     

    1. <div id="demo-laypage-normal-1">div>
    2. <div id="demo-laypage-normal-2">div>
    3. <script>
    4. layui.use(function(){
    5.   var laypage = layui.laypage;
    6.   // 普通用法
    7.   laypage.render({
    8.     elem: 'demo-laypage-normal-1',
    9.     count: 50 // 数据总数
    10.   });
    11.   laypage.render({
    12.     elem: 'demo-laypage-normal-2',
    13.     count: 100 // 数据总数
    14.   });
    15. });
    16. script>
     

     

     
     

    二：自定义主题 
     

    1. <div id="demo-laypage-theme-1">div>
    2. <div id="demo-laypage-theme-2">div>
    3. <div id="demo-laypage-theme-3">div>
    4. <script>
    5. layui.use(function(){
    6.   var laypage = layui.laypage;
    7.   // 自定义主题
    8.   laypage.render({
    9.     elem: 'demo-laypage-theme-1',
    10.     count: 100,
    11.     theme: '#1E9FFF'
    12.   });
    13.   laypage.render({
    14.     elem: 'demo-laypage-theme-2',
    15.     count: 100,
    16.     theme: '#FF5722'
    17.   });
    18.   laypage.render({
    19.     elem: 'demo-laypage-theme-3',
    20.     count: 100,
    21.     theme: '#FFB800'
    22.   });
    23. });
    24. script>
     

     

     

    三：自定义文本 
     

    1. <div id="demo-laypage-text">div>
    2. <script>
    3. layui.use(function(){
    4.   var laypage = layui.laypage;
    5.   // 自定义文本
    6.   laypage.render({
    7.     elem: 'demo-laypage-text',
    8.     count: 100,
    9.     first: '首页',
    10.     last: '尾页',
    11.     prev: '←',
    12.     next: '→'
    13.   });
    14. });
    15. script>
     

     

    四：自定义排版
     

    1. <div id="demo-laypage-layout-1">div>
    2. <div id="demo-laypage-layout-2">div>
    3. <div id="demo-laypage-layout-3">div>
    4. <script>
    5. layui.use(function(){
    6.   var laypage = layui.laypage;
    7.   // 自定义排版
    8.   laypage.render({
    9.     elem: 'demo-laypage-layout-1',
    10.     count: 1000,
    11.     layout: ['limit', 'prev', 'page', 'next']
    12.   });
    13.   laypage.render({
    14.     elem: 'demo-laypage-layout-2',
    15.     count: 1000,
    16.     layout: ['prev', 'next', 'page']
    17.   });
    18.   laypage.render({
    19.     elem: 'demo-laypage-layout-3',
    20.     count: 1000,
    21.     layout: ['page', 'count']
    22.   });
    23. });
    24. script>
     

     

    五：完整显示 
     

    1. <div id="demo-laypage-all">div>
    2. <script>
    3. layui.use(function(){
    4.   var laypage = layui.laypage;
    5.   // 完整显示
    6.   laypage.render({
    7.     elem: 'demo-laypage-all', // 元素 id
    8.     count: 100, // 数据总数
    9.     layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
    10.     jump: function(obj){
    11.       console.log(obj);
    12.     }
    13.   });
    14. });
    15. script>
     

     
    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
HarmonyOS ArkUI实战开发-NAPI 加载原理（上）                            
    
【PostgreSQL高可用之Repmgr和Patroni部分场景对比】                            
    
python中def一个方法，就一定对应一个return吗                            
    
STARKs with small finite field：小域带来的迷人性能                            
    
内网穿透的应用-如何本地部署Elasticsearch搜索分析引擎实现并发布公网远程访问                            
    
改进YOLOv5小目标检测：构建多尺度骨干和特征增强模块，提升小目标检测                            
    
【docker实战】如何上传镜像到自己的私有仓库                            
    
网络参考模型与标准协议（一）                            
    
javaWeb网上购物系统的设计与实现                            
    
算法常见技巧 -快速幂及其相关应用                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/qq_61313896/article/details/132966386
                
    •