layui-分页

最新推荐文章于 2024-08-03 13:41:47 发布

岽仔玖等

最新推荐文章于 2024-08-03 13:41:47 发布

阅读量1.4k

点赞数 1

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

本文链接：https://blog.csdn.net/ajlgl/article/details/72516814

版权

Layui 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

layui-分页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>分页</title>
        <link rel="stylesheet" href="layui/css/layui.css">
    </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/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>