laypage静态数据分页组件的调用实战代码

引入layui.js封装库

<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8"/>
    <!--JS核心库-->
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">

构建容器

<!--列表页-->
<ul id="biuuu_city_list"></ul>
<!--分页容器-->
<div id="lockDom"></div>

调用laypage分页组件

layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage
            , layer = layui.layer;

        //调用分页
        laypage.render({
            elem: 'lockDom'
            , count: data.length
            , limit: 10//每页显示条数
            , limits: [10, 20, 30]
            , curr: 1//起始页
            , groups: 3//连续页码个数
            , prev: '上页'//上一页文本
            , next: '下页'//下一页文本
            , first: 1 //首页文本
            //, last: 100 //尾页文本
            //, layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip']
            , jump: function (obj) {
                document.getElementById('biuuu_city_list').innerHTML = function () {
                    var arr = [];
                    var thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                    //console.log(thisData);

                    //遍历数据;
                    layui.each(thisData, function (index, item) {
                        arr.push('<li>' + item.name + ',' + item.lng + ',' + item.lat + '</li>');
                    });
                    return arr.join('');
                }();
            }
        });
    });

@lockdata.cn