1、先贴出代码<!--这里是模板，注意script的ID值 开始--><script id="ListTpl&qu泠贾高框ot; type="text/html">{{# for(var i = 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> <img src="/images/ico_edit.png" title="修改"> <img src="/images/ico_delete.png" title="删除"> </td> </tr>{{# } }}</script><!--这里是模板 结束--></head><body><div class="place"> <span>位置：</span> <ul class="placeul"> <li><a href="/Index/Main/Main">首页</a></li> <li>管理</li> </ul></div> <div class="formbody"> <div id="usual1" class="usual"> <div class="tools"> <input type="text" class="scinput" name="searchkey" id="searchkey" placeholder="请输入关键词"> <input type="submit" class="sure" value="查询" onclick="TplAndPage('/Index/Courses/OutlineList',{'page':1,'searchkey':$('#searchkey').val()});"><!--此处为参数加载数据--> </div> <table class="tablelist"> <thead> <tr> <th width="10%">ID</th> <th width="10%">Item1</th> <th width="20%">Item2</th> <th width="10%">Item3</th> <th width="10%">Item4</th> <th width="30%">Item5</th> <th width="10%">管理</th> </tr> </thead> <tbody id="Render_List"> </tbody> </table> <div id="page" style="margin-top:10px; text-align:right;"></div> </div></div><script type="text/javascript">function TplAndPage(url,options){ opt = options || {'page':1}; //如果没有传值参数，补充个页面 $.getJSON(url,opt, function(res){ var tpl = document.getElementById('ListTppl').innerHTML; laytpl(tpl).render(res, function(html){ document.getElementById('Render_List').innerHTML = html; }); laypage({ cont: 'page', //此处对应<div id="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、几处关键地方1、模板<!--这里是模板，注意script的ID值 开始--><script id="ListTpl" type="text/html">{{# for(var i = 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> <img src="/images/ico_edit.png" title="修改"> <img src="/images/ico_delete.png" title="删除"> </td> </tr>{{# } }}</script><!--这里是模板 结束-->2、模板渲染后显示的区域<tbody id="Render_List"></tbody>3、显示页数<div id="page" style="margin-top:10px; text-align:right;"></div>
3、核心方法url是对应的列表地址options是传递的对象参数，格式为{'page':1,'searckkey':'123'},把所有自定义的参数都封装到options传递到后台，如果没有options参数，则默认补充个page=1functionTplAndPage(url,options){ opt = options || {'page':1}; //如果没有传值参数，补充个页面 $.getJSON(url,opt, function(res){ var tpl = document.getElementById('ListTppl').innerHTML; laytpl(tpl).render(res, function(html){ document.getElementById('Render_List').innerHTML = html; }); laypage({ cont: 'page', //此处对应<div id="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); } } }) }) }