自己因业务需求，接触到LayTpl和LayPage，然后综合网上查询到的信息和官网的示例，结合业务需求改进了一个高复用性的方法。
工具/原料
LayPage
LayTpl
方法/步骤
1、先贴出代码<!--这里是模板，注意scrip隋茚粟胫t的ID值开始--><scriptid="ListTpl&qu泠贾高框ot;type="text/html">{{#for(vari=0,len=d.list.length;i<len;i++){}}<tr><td>{{d.list[i].id}}</td><td>{{d.list[i].Item1}}</td><td>{{d.list[i].Item2}}</td><td>{{d.list[i].Item3}}</td><td>{{d.list[i].Item4}}</td><td>{{d.list[i].Item5}}</td><td><imgsrc="/images/ico_edit.png"title="修改"><imgsrc="/images/ico_delete.png"title="删除"></td></tr>{{#}}}</script><!--这里是模板结束--></head><body><divclass="place"><span>位置：</span><ulclass="placeul"><li><ahref="/Index/Main/Main">首页</a></li><li>管理</li></ul></div><divclass="formbody"><divid="usual1"class="usual"><divclass="tools"><inputtype="text"class="scinput"name="searchkey"id="searchkey"placeholder="请输入关键词"><inputtype="submit"class="sure"value="查询"onclick="TplAndPage('/Index/Courses/OutlineList',{'page':1,'searchkey':$('#searchkey').val()});"><!--此处为参数加载数据--></div><tableclass="tablelist"><thead><tr><thwidth="10%">ID</th><thwidth="10%">Item1</th><thwidth="20%">Item2</th><thwidth="10%">Item3</th><thwidth="10%">Item4</th><thwidth="30%">Item5</th><thwidth="10%">管理</th></tr></thead><tbodyid="Render_List"></tbody></table><divid="page"style="margin-top:10px;text-align:right;"></div></div></div><scripttype="text/javascript">functionTplAndPage(url,options){opt=options||{'page':1};//如果没有传值参数，补充个页面$.getJSON(url,opt,function(res){vartpl=document.getElementById('ListTppl').innerHTML;laytpl(tpl).render(res,function(html){document.getElementById('Render_List').innerHTML=html;});laypage({cont:'page',//此处对应<divid="page"style="margin-top:10px;text-align:right;"></div>pages:res.TotalPage,//从服务器上获取的总页数curr:opt.page||1,groups:10,jump:function(obj,first){if(!first){opt.page=obj.curr;//将跳转的页值传给对象TpplAndPage(url,opt);}}})})}TplAndPage('/Index/Courses/OutlineList');//默认加载</script>
2、几处关键地方模板<!--这里是模板，注意script的ID值开始--><scriptid="ListTpl"type="text/html">{{#for(vari=0,len=d.list.length;i<len;i++){}}<tr><td>{{d.list[i].id}}</td><td>{{d.list[i].Item1}}</td><td>{{d.list[i].Item2}}</td><td>{{d.list[i].Item3}}</td><td>{{d.list[i].Item4}}</td><td>{{d.list[i].Item5}}</td><td><imgsrc="/images/ico_edit.png"title="修改"><imgsrc="/images/ico_delete.png"title="删除"></td></tr>{{#}}}</script><!--这里是模板结束-->模板渲染后显示的区域<tbodyid="Render_List"></tbody>显示页数<divid="page"style="margin-top:10px;text-align:right;"></div>
3、核心方法url是对应的列表地址options是传递的对象参数，格式为{'p瞢铍库祢age':吭稿荔徊1,'searckkey':'123'},把所有自定义的参数都封装到options传递到后台，如果没有options参数，则默认补充个page=1functionTplAndPage(url,options){opt=options||{'page':1};//如果没有传值参数，补充个页面$.getJSON(url,opt,function(res){vartpl=document.getElementById('ListTppl').innerHTML;laytpl(tpl).render(res,function(html){document.getElementById('Render_List').innerHTML=html;});laypage({cont:'page',//此处对应<divid="page"style="margin-top:10px;text-align:right;"></div>pages:res.TotalPage,//从服务器上获取的总页数curr:opt.page||1,groups:10,jump:function(obj,first){if(!first){opt.page=obj.curr;//将跳转的页值传给对象TplAndPage(url,opt);}}})})}