Demo 文件传不上了，大家凑合看代码吧
laypage官方网站http://laypage.layui.com/
class PppController extends ComController
{
///第一种
public function index()
{
$pro=M('article')->field('title,aid')->select();
$num=10; //每页几条
$result= json_encode($pro);
$this->assign('result',$result);
$this->assign('num',$num);
$this->display('ppp/index'); // 输出模板
}
//第二种要laytpl模型js，本方式是在方法里控制页数
public function index1()
{
$key = I('post.key', '', 'strip_tags');
if(!$key==0){
$data['title'] = array('like', '%'.$key.'%');
}
$count = M('article')->where($data)->count();
$num=10; //每页几条
$this->assign('count',$count); //总条数
$this->assign('key',$key); //搜索的值
$this->assign('num',$num); //每页几条
$this->display('ppp/index1');
}
public function indexjson1($page=1)
{
$num=10; //每页几条
$keyr = I('get.key', '', 'strip_tags');
if(!$keyr==0){
$data['title'] = array('like', '%'.$keyr.'%');
}
$pro=M('article')->field('aid,title')->where($data)->page($page,$num)->select();
$this->ajaxReturn($pro);
}
//第三种
public function index2()
{
$key = I('post.key', '', 'strip_tags');
if(!$key==0){
$data['title'] = array('like', '%'.$key.'%');
}
$count = M('article')->where($data)->count();
$num=10;
$this->assign('count',$count);
$this->assign('key',$key);
$this->assign('num',$num);
$this->display('ppp/index2');
}
public function indexjson2()
{
$keyr = I('get.key', '', 'strip_tags');
if(!$keyr==0){
$data['title'] = array('like', '%'.$keyr.'%');
}
$pro=M('article')->field('aid,title')->where($data)->select();
$this->ajaxReturn($pro);
}
}模板1<ul id="biuuu_city_list"></ul>
<div id="biuuu_city"></div>
<script src="__PUBLIC__/home/laypage/laypage.js"></script>
<script>
//测试数据
var data = {$result};
var nums = {$num}; //每页出现的数量
var pages = Math.ceil(data.length/nums); //得到总页数
var thisDate = function(curr){
//此处只是演示，实际场景通常是返回已经当前页已经分组好的数据
var str = '', last = curr*nums - 1;
last = last >= data.length ? (data.length-1) : last;
for(var i = (curr*nums - nums); i <= last; i++){
str += '<li>'+ data[i]['title'] +''+ data[i]['aid'] +'</li>';
}
return str;
};
//调用分页
laypage({
cont: 'biuuu_city',
pages: pages,
skin: '#AF0000', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
groups: 7, //连续显示分页数
skip: true,
jump: function(obj){
document.getElementById('biuuu_city_list').innerHTML = thisDate(obj.curr);
}
})
</script>模板2<script src="__PUBLIC__/home/laypage/jquery.min.js"></script>
<script src="__PUBLIC__/home/laypage/laytpl.js"></script>
<script src="__PUBLIC__/home/laypage/laypage.js"></script>
<!--搜索框开始-->
<form name="admin_list_sea" class="form-search" method="post" action="{:U('Ppp/index1')}">
<input type="text" id="key" class="form-control" name="key" value="{$key}" placeholder="输入需查询的文章名称" />
<button type="submit">搜索</button>
</form>
<!--搜索框结束-->
<div class="example-wrap">
<div class="example">
<table class="table table-bordered table-hover">
<thead>
<tr class="long-tr">
<th width="3%">ID</th>
<th width="15%">标题</th>
</tr>
</thead>
<script id="list-template" type="text/html">
{{# for(var i=0;i<d.length;i++){ }}
<tr class="long-td">
<td>{{d[i].aid}}</td>
<td>{{d[i].title}}</td>
</tr>
{{# } }}
</script>
<tbody id="list-content"></tbody>
</table>
<div id="AjaxPage"></div>
<div>
<span id="allpage"></span>
</div>
</div>
</div>
<div class="spiner-example">加载中</div>
<script type="text/javascript">
/**
* [Ajaxpage laypage分页]
* @param {[type]} curr [当前页]
*/
Ajaxpage();
function Ajaxpage(curr){
var key=$('#key').val();
$.getJSON('{:U('Ppp/indexjson1')}', {
page: curr || 1,key:key
}, function(data){ //data是后台返回过来的JSON数据
$(".spiner-example").css('display','none'); //数据加载完关闭动画
if(data==''){
$("#list-content").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
}else{
var nums = {$num}; //每页出现的数量
var pagesz = {$count};
var pages = Math.ceil({$count}/nums);
var tpl = document.getElementById('list-template').innerHTML;
laytpl(tpl).render(data, function(html){
document.getElementById('list-content').innerHTML = html;
});
laypage({
cont: $('#AjaxPage'),//容器。值支持id名、原生dom对象，jquery对象,
pages: pages,//总页数
pagesz:pagesz,
skip: true,//是否开启跳页
skin: '#1AB5B7',//分页组件颜色
curr: curr || 1,
groups: 3,//连续显示分页数
jump: function(obj, first){
if(!first){
Ajaxpage(obj.curr)
}
$('#allpage').html('有'+ obj.pagesz +'条数据，第'+ obj.curr +'页，共'+ obj.pages +'页');
}
});
}
});
}
</script>模板三<script src="__PUBLIC__/home/laypage/jquery.min.js"></script>
<script src="__PUBLIC__/home/laypage/laypage.js"></script>
<!--搜索框开始-->
<form name="admin_list_sea" class="form-search" method="post" action="{:U('Ppp/index2')}">
<input type="text" id="key" class="form-control" name="key" value="{$key}" placeholder="输入需查询的文章名称" />
<button type="submit">搜索</button>
</form>
<ul id="biuuu_city_list"></ul>
<div id="AjaxPage"></div>
<div>
<span id="allpage"></span>
</div>
<!--搜索框结束-->
<div class="spiner-example">加载中</div>
<script type="text/javascript">
/**
* [Ajaxpage laypage分页]
* @param {[type]} curr [当前页]
*/
Ajaxpage();
function Ajaxpage(curr){
var key=$('#key').val();
$.getJSON('{:U('Ppp/indexjson2')}', {
page: curr || 1,key:key
}, function(data){ //data是后台返回过来的JSON数据
$(".spiner-example").css('display','none'); //数据加载完关闭动画
if(data==''){
$("#list-content").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
}else{
var nums = {$num}; //每页出现的数量
var pagesz = {$count};
var pages = Math.ceil({$count}/nums);
var thisDate = function(curr){
//此处只是演示，实际场景通常是返回已经当前页已经分组好的数据
var str = '', last = curr*nums - 1;
last = last >= data.length ? (data.length-1) : last;
for(var i = (curr*nums - nums); i <= last; i++){
str += '<li>'+ data[i]['title'] +''+ data[i]['aid'] +'</li>';
}
return str;
};
laypage({
cont: $('#AjaxPage'),//容器。值支持id名、原生dom对象，jquery对象,
pages: pages,//总页数
pagesz:pagesz,
skip: true,//是否开启跳页
skin: '#1AB5B7',//分页组件颜色
curr: curr || 1,
groups: 3,//连续显示分页数
jump: function(obj, first){
if(!first){
Ajaxpage(obj.curr)
}
$('#allpage').html('有'+ obj.pagesz +'条数据，第'+ obj.curr +'页，共'+ obj.pages +'页');
document.getElementById('biuuu_city_list').innerHTML = thisDate(obj.curr);
}
});
}
});
}
</script>以上三个demo，ajax无刷新+带搜索功能，适合新手学习，本人写的有点乱，再想说一句各大神发教程时能不能再详细点呢能不能上DEMO呢
laypageDEMO.rar
( 37.37 KB 下载：84 次 )
