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>

從上面 獲取自己想要的。。。。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章