结合 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); } }); }); });