laypage+laytpl示例
- WBOY原创
- 2016-08-04 08:56:182376浏览
laypage加laytpl的使用方法，技术不好，摸索了好久才弄出来。
首先去layer官网下载这两个插件，按照他们的文档引入js
然后我的代码如下：
1：html+jquery<div><!--这是循环获取的数据--></div>
<br>
<br>
//laypage分页<br>
Ajaxpage();<br>
function Ajaxpage(curr,num){<br>
if(!num){<br>
num=5; //num是当前要查询的数量，我这里设置了默认5条，前台可以修改要显示的数量<br>
};<br>
var catid=$('#catid').val(); //这是条件赛选栏目id<br>
var starttime=$('#starttime').val();//这是条件筛选开始时间<br>
var endtime=$('#endtime').val();//这是条件筛选结束时间<br>
var title=$('#title').val();//这是标题关键词<br>
$.get('{:U("Content/article")}', {<br>
page: curr || 1,num:num,catid:catid,starttime:starttime,endtime:endtime,title:title<br>
}, function(data){<br>
//这一段是laytpl的模板渲染的赋值<br>
var tpl = document.getElementById('arlist').innerHTML; //定义tpl <script></script> <br>
laytpl(tpl).render(data.info.lists, function(html){ //把获取到的json数据传给这里面<br>
document.getElementById('article_list').innerHTML = html; //这是获取数据，然后渲染到 id为article_list的div里面<br>
});<br>
laypage({ //这一段是laypage的分页参数<br>
cont: $('#AjaxPage'), <br>
pages:data.info.allpage, <br>
skip: true,<br>
skin: '#23c6c8',<br>
curr: curr || 1,<br>
groups: 3,<br>
jump: function(obj, first){<br>
if(!first){<br>
Ajaxpage(obj.curr,num) <br>
}<br>
}<br>
});<br>
});<br>
}<br>
//这是tpl的js模板 ， 部分相同的地方我删了，留了不相同的，里面还有if标签的用法，只是这里的U方法我不知道怎么使用，就用了jquery的方法来调用一些功能<br>
<script><br />
{{# for(var i=0;i<d.length;i++){ var vo=d[i] }} //这里就是js里面的for循环了，只是要用 tpl的模板标签 {{# }} 包含<br />
<tr><br />
<td>{{vo.catname}}<br />
<td style="text-align:center">{{vo.views}}<br />
<td style="text-align:center">{{vo.comments}}<br />
<td style="text-align:center">{{vo.author}}<br />
<td style="text-align:center">{{vo.uptime}}<br />
<td style="text-align:center"><br />
{{# if(vo.status==1){ }} <br />
<a class="label label-info" href="javascript:;" onclick="return ar_status(this,'status_{{vo.id}}_0');">审核<br />
{{# }else{ }}<br />
<a class="label label-danger" href="javascript:;" onclick="return ar_status(this,'status_{{vo.id}}_1');">审核<br />
{{# } }}<br />
<br />
<td style="text-align:center"><br />
<div class="btn-group"><br />
<a data-toggle="dropdown" class="label label-info dropdown-toggle">文章操作 <span class="caret"><br />
<ul class="dropdown-menu"><br />
<li><a href="javascript:ar_edit({{vo.id}})" class="font-bold">修改 <br />
<li class="divider"><br />
<li><a href="javascript:ar_del({{vo.id}})" class="J_del">删除<br />
<br />
<br />
<br />
<br />
{{# }; }}<br />
</script>2：php//文章列表<br>
public function article(){<br>
if($_GET['page']){<br>
$Nowpage = $_GET['page']?$_GET['page']:1; //获取当前页<br>
$catid=intval($_GET['catid']);//获取条件筛选栏目id<br>
$starttime=strtotime($_GET['starttime']);//条件筛选开始时间<br>
$endtime=strtotime($_GET['endtime']);//条件筛选结束时间<br>
$title=$_GET['title'];//条件筛选关键词<br>
$map="id>0";//组合查询条件<br>
if($catid>0){<br>
$map.=" and catid=".$catid.""; <br>
}<br>
if(!empty($starttime)){<br>
$map.=" and uptime>=".$starttime." and uptime
}<br>
if(!empty($endtime)){<br>
$map.=" and uptime>=".$starttime." and uptime
}<br>
if(!empty($title)){<br>
$map.=" and title like '%$title%'";<br>
}<br>
$limits = $_GET['num']?$_GET['num']:5; //这里默认查询5条数据<br>
// 获取总条数<br>
$count = M('Article')->where($map)->count();<br>
//计算总页面<br>
$allpage = ceil($count / $limits);<br>
$allpage = intval($allpage);<br>
$lists = M('Article')->where($map)->page($Nowpage, $limits)-> order('listorder asc')-> select();<br>
foreach($lists as $k=>$v){<br>
$lists[$k]['catname']=catname($v['catid']);//这是我写的获取当前栏目名称的方法<br>
$lists[$k]['uptime']=friendlyDate($v['uptime']);//这是我写的获取时间的方法<br>
}<br>
$data['allpage']=$allpage;//返回总页数<br>
$data['lists']=$lists;//查询的数据列表<br>
$this->success($data);exit;<br>
}<br>
$cate=M('Category')->order('listorder ASC')->select();<br>
$this->assign('catelist',$cate);<br>
$this->display();<br>
}我做的页面
有不清楚的可以联系我：QQ 3126620990 我的网站:http://www.renweinet.net
http://www.hjlog.net