mocks.js + layui的分页

结合 mocks.js + layUI + ajax 实现分页功能

1、html

    <body>
        <ul id="biuuu_city_list">
            
        </ul>
        <div id="test1"></div>

        <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
        <script src="http://mockjs.com/dist/mock.js"></script>
        <script src="js/xx.js" type="text/javascript" charset="utf-8"></script>

    </body>

2.js

/**
 * @description mocks.js 生成后台数据
 */
Mock.mock('http://bb.cn', {
            "list|50": [{
                'id|+1': 1,
                'img': "@dataImage('100x100','bg')",
                'name': '@name',
                'city': "@county(true)"
            }]
    });
    
    
/**
 * @description 加载layui相关组件
 */
var arr = [
    'layer',
    'laytpl',
    'carousel',
    'element',
    'util',
    'laypage',
    'upload',
    'form',
    'flow',
    'laydate'
]

/**
 * @description 使用layui
 * @param (@type:Array,fn)
 */
layui.define(arr, function(exports) {
            var $ = layui.jquery,
                laypage = layui.laypage;
            /**
             * @description 获取模拟的后台数据
             */
            $.getJSON('http://bb.cn',function(data){
                var arr2=[];
                $.each(data, function(i,item) {
                    arr2=item
                });
                
              /**
               * @description 调用分页
               */
              laypage.render({
                elem: 'test1'
                ,limit: 5
                ,theme: '#1E9FFF'
                ,first: '首页'
                ,last: '尾页'
                ,prev: '<em>←</em>'
                ,next: '<em>→</em>'
                ,count: arr2.length
                ,jump: function(obj){
                    var html='',
                    thisData = arr2.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
                    $.each(thisData, function(index, item){
                            console.log(item)
                            html += `<li data-id="${item.id}">
                                        <h1>${item.name}</h1>
                                        <img src="${item.img}" alt="" />
                                        <p>${item.city}</p>
                                    </li>
                            `
                    });
                    $('#biuuu_city_list').html(html);
                }
              });
                
            });
});

 

posted @ 2017-09-28 18:01  吾生有涯，而知无涯！  阅读(1549)  评论(0)    收藏  举报