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> ```