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

引入layui.js封装库

构建容器

调用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('
' + item.name + ',' + item.lng + ',' + item.lat + '
');
                    });
                    return arr.join('');
                }();
            }
        });
    });

@lockdata.cn