Layui的分页模块在网站中的应用
制作网站的时候,有时候我们常常会被一些要求复杂的分页给困住,最后要么就是写一个简单的分页,要么就做成瀑布流的形式。
有了Layui之后,我认为开发人员多了一个选择,那就是尝试用Layui内置的分页模块。
使用方法如下:
JavaScript:
layui.use(['layer','laypage','jquery'], function () {
var layer = layui.layer,$ = layui.jquery, laypage = layui.laypage;
//执行一个laypage实例
// 订单管理的分页
laypage.render({
elem: 'fpage', //注意,这里的 test1 是 ID,不用加 # 号
layout: ['prev', 'page', 'next', 'count'],
count: "{$count}", //数据总数,从服务端得到
prev: '上一页',
next: '下一页',
limit: "{$limit}"
,curr: location.search.replace('?page=', '') //这里是重点,从地址栏取得当前页
,jump: function(obj, first){
//obj包含了当前分页的所有参数,比如:
// console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
// console.log(obj.limit); //得到每页显示的条数
//首次不执行
if(!first){
//do something
window.location.href="{:U('news/lists')}?page="+obj.curr;
}
}
});
});
在引用Layui的js文件的时候,要记得 layui.js 和 layui.all.js 只引用一个就可以了,否则会出现表单提交两次的问题。
分页样式可以根据 Layui分页文档 自己定制。
PHP:
$page=I('get.page')?(I('get.page')-1):0;
$limit=10; //每页数量
$start=$limit*$page; //开始页
$count = $model -> getNewsCount($condition);
$data = $model -> getNewsList($condition, 'id,title,description,thumb,create_time', $start.','.$limit, 'listorder asc,create_time desc');
//数据传到前端
$this -> assign("count", $count);
$this -> assign("limit", $limit);
$this -> assign("data", $data);
HTML:
{volist name="data" id="vo"}
<li class="clearfix">
<a href="{:U('news/detail',['id'=>$vo['id']])}">
<img src="{$vo.thumb}" alt="" class="fl">
<div class="fl clearfix">
<div class="fl">
<h4>{$vo.title}</h4>
<p>
{$vo.description}
</p>
</div>
<p class="time fr">{$vo.create_time|Date='m-d',###}</p>
</div>
</a>
</li>
{/volist}
THE END
每一次的结束都意味着新的开始