快速使用laypage分页demo

最新推荐文章于 2022-05-10 10:45:30 发布

thinktech_Li

最新推荐文章于 2022-05-10 10:45:30 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端(JS/HTML/CSS)

本文链接：https://blog.youkuaiyun.com/Tenlay_Li/article/details/88660304

前端(JS/HTML/CSS) 专栏收录该内容

5 篇文章

订阅专栏

layPage致力于提供极致分页逻辑，可胜任异步分页和页面刷新式分页。自layui 2.0起，其核心代码和API设计完成蜕变，有清爽UI、灵活排版和极简调用方式。还可通过laypage.render(options)设置基础参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的UI、灵活的排版，极简的调用方式，这一切的优质元素，都将毫无违和感地镶嵌在你的页面之中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>laypage</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../public/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div style="text-align: center;">

</div>    

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>将一段已知数组分页展示</legend>
</fieldset>

<div id="demo"></div>
<ul id="city_list"></ul>


<script src="../public/layui/js/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['laypage', 'layer'], function(){
        var laypage = layui.laypage
            ,layer = layui.layer;

        //用于分页展示的测试数据，一般通过服务端得到
        var data = [
            '北京',
            '上海',
            '广州',
            '深圳',
            '杭州',
            '长沙',
            '合肥',
            '宁夏',
            '成都',
            '西安',
            '南昌',
            '上饶',
            '沈阳',
            '济南',
            '厦门',
            '福州',
            '九江',
            '宜春',
            '赣州',
            '宁波',
            '绍兴',
            '无锡',
            '苏州',
            '徐州',
            '东莞',
            '佛山',
            '中山',
            '成都',
            '武汉',
            '青岛',
            '天津',
            '重庆',
            '南京',
            '九江',
            '香港',
            '澳门',
            '台北'
        ];

        //调用分页
        laypage.render({
            elem: 'demo'         // 1.elem: 'id' 注意：这里不能加 # 号,2. elem: document.getElementById('id')
            ,count: data.length  //数据总数。一般通过服务端得到
            //,limit: 4         //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
            ,limits: [10, 20, 50]   //每页条数的选择项
            ,layout: [ 'prev', 'page', 'next', 'limit', 'limits']
            ,theme: '#FF5722'   //自定义主题
            ,jump: function(obj){
                //模拟渲染
                document.getElementById('city_list').innerHTML = function(){
                    var arr = []
                        ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
                    layui.each(thisData, function(index, item){
                        arr.push('<li>'+ item +'</li>');
                    });
                    return arr.join('');
                }();
            }
        });

    });
</script>

</body>
</html>

基础参数选项

通过核心方法：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