laypage+laytpl範例
- WBOY原創
- 2016-08-04 08:56:182340瀏覽
laypage加laytpl的使用方法，技术不好，摸索了好久才弄出来。
首先去layer官网下载这两个插件，按照他们的文档引入js
然后我的代码如下：
1：html+jquery<div id="article_list"><!--这是循环获取的数据--></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>
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}}</td><br />
<td style="text-align:center">{{vo.uptime}}</td><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');">审核</a><br />
{{# }else{ }}<br />
<a class="label label-danger" href="javascript:;" onclick="return ar_status(this,'status_{{vo.id}}_1');">审核</a><br />
{{# } }}<br />
</td><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"></span></a><br />
<ul class="dropdown-menu"><br />
<li><a href="javascript:ar_edit({{vo.id}})" class="font-bold">修改</a> </li><br />
<li class="divider"></li><br />
<li><a href="javascript:ar_del({{vo.id}})" class="J_del">删除</a></li><br />
</ul><br />
</div><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('list asc')->
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