LayTppl+LayPage高效简洁使用方法
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>
<!--这里是模板 结束-->
</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=1
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; //将跳转的页值传给对象
TplAndPage(url,opt);
}
}
})
})
}