lanyu分页效果拿来展示

第一步：

复制源代码

<%@ page import="com.xing.MyDb" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="js/layui/css/layui.css" media="all">
</head>
<body>

<div id="test1"></div>

<script src="js/layui/layui.all.js"></script>
<script>
    layui.use('laypage', function(){
        var laypage = layui.laypage;

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


</body>
</html>

结果：

第二步：很关键，查看源代码，审查元素...

我知道各位把这步看的很简单，但是对于一个在lanyu官网上找啊找，怎么也找不到的人来说，这一步是有多关键。。。。

<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="js/layui/css/layui.css" media="all">
    <link id="layuicss-laydate" rel="stylesheet"
          href="http://localhost/js/layui/css/modules/laydate/default/laydate.css?v=5.0.9" media="all">
    <link id="layuicss-layer" rel="stylesheet"
          href="http://localhost/js/layui/css/modules/layer/default/layer.css?v=3.1.1" media="all">
    <link id="layuicss-skincodecss" rel="stylesheet" href="http://localhost/js/layui/css/modules/code.css" media="all">
</head>
<body>

<div id="test1">
    <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1">
        <a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">上一页</a>
        <span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span>
        <a href="javascript:;" data-page="2">2</a>
        <a href="javascript:;" data-page="3">3</a>
        <a href="javascript:;" data-page="4">4</a>
        <a href="javascript:;" data-page="5">5</a>
        <a href="javascript:;" class="layui-laypage-next" data-page="2">下一页</a>
    </div>
</div>

<script src="js/layui/layui.all.js"></script>
<script>
    layui.use('laypage', function () {
        var laypage = layui.laypage;

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


</body>
</html>

从上面获取自己想要的。。。。

lanyu分页效果拿来展示

猜你喜欢