laypage+laytpl · LayUI的学习

## 如图 ![mark](http://qiniu.newthink.cc/blog/20171218-174252169.gif) ## 代码 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../layui/css/layui.css"/> </head> <body> <div id="view"></div> <div id="page"></div> <script id="demo" type="text/html"> <ul> {{# layui.each(d, function(index, item){ }} <li> <span>{{ item.modname }}：</span> <span>{{ item.alias }}</span> </li> {{# }); }} {{# if(d.length === 0){ }} 无数据 {{# } }} </ul> </script> <script src="../layui/layui.js"></script> <script> layui.use(['laypage','jquery','laytpl'],function () { var laypage = layui.laypage ,$ = layui.jquery ,laytpl = layui.laytpl; //第三步：渲染模版 var data = { //数据 "list":[ {"modname":"表单1","alias":"form"} ,{"modname":"表单2","alias":"form"} ,{"modname":"表单3","alias":"form"} ,{"modname":"表单4","alias":"form"} ,{"modname":"表单5","alias":"form"} ,{"modname":"表单6","alias":"form"} ,{"modname":"表单7","alias":"form"} ,{"modname":"表单8","alias":"form"} ,{"modname":"表单9","alias":"form"} ,{"modname":"表单10","alias":"form"} ,{"modname":"表单11","alias":"form"} ,{"modname":"表单12","alias":"form"} ,{"modname":"表单13","alias":"form"} ] }; //调用分页 laypage.render({ elem: 'page' ,count: data.list.length ,jump: function(obj){ $("#view").html(function () { var thisData = data.list.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit); //模板 laytpl($("#demo").html()).render(thisData, function (html) { $("#view").html(html); }); }) } }); }); </script> </body> </html> ```