Layui的分页操作

我在开发的过程中用layui去实现前端页码的分页操作,但是在部署的过程中,发现我前端的数据是分页来读取数据的,所以这个layui的方法不能满足需求,我需要使用分页操作的js代码去读取数据,并且在这里记录一下开发中走的弯路。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</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="../../../../nresource/comp/js/layui/css/layui.css" media="all">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>显示完整功能</legend>
</fieldset>

<div id="demo8"></div>

<div id="demo7"></div>




<script src="../../../../nresource/comp/private/module/cutover/js/layui/layui.js"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述 JS 路径需要改成你本地的 -->
<script>
    //将一段数组分页展示
    var data = ['1','10','11','111','1111','1524','2','3','4','6','1','10','11','111','1111','1524','2','3','4','6','1','10','11','111','1111','1524','2','3','4','6','1','10','11','111','1111','1524','2','3','4','6',];
    console.log("typeofdata--------------"+typeof (data))
     var pageNum=5;
     console.log("typeofdata--------------"+typeof (data))
    layui.use(['laypage', 'layer'], function(){
        var laypage = layui.laypage
            ,layer = layui.layer;
        //完整功能
        laypage.render({
            elem: 'demo7'
            ,count: data.length
            ,pages: Math.ceil(data.length/pageNum)//得到总页数
            ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            ,jump: function(obj){
                //模拟渲染
                document.getElementById('demo8').innerHTML = function(){
                    var arr = []
                        ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
                    console.log("thisData--------------"+thisData)

                    layui.each(thisData, function(index, item){
                        arr.push('<li>'+ item +'</li>');
                    });
                    return arr.join('');
                }();

            }
        });


    });
</script>

</body>
</html>

版权声明:本文为qq_29423387原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。