Controller
//前台展示
public function test() {
//查询资讯详细信息 将默认查询数量传入
$areInfo = $this->searchInfo(0,100);
$this->assign('res', $areInfo);
$this->display();
}
//接收前台请求 设置查询条件
public function loadpage(){
if (IS_AJAX && IS_POST){
$page = I('post.page') ? I('post.page') : false;
if ($page){
$pageSize = 6;
$startPage = ($page - 1) * $pageSize + $pageSize;
$artInfo = $this->searchInfo($startPage, $pageSize);
return $this->showMsg(1,'获取数据成功',$artInfo);
} else{
return $this->showMsg(0, '请重新刷新!');
}
}
}
/**
* 查询资讯分页 默认加载10条
* @param int $startPage 开始位置
* @param int $pageSize 显示条数
* @return mixed
*/
public function searchInfo($startPage = 0, $pageSize = 10){
$areInfo = M('t_area')
->order('id desc')
->limit($startPage, $pageSize)
->select();
return $areInfo;
}
//将所需数据返回给前台
public function showMsg($status , $msg , $data=array()) {
$res = array(
'status' => $status,
'msg'=> $msg,
'data'=>$data
);
$this->ajaxReturn($res);
}
前台部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例</title>
</head>
<body>
<table class="restable">
<foreach name='res' item='v'>
<tr>
<td>{$v.id}</td>
<td>{$v.parentid}</td>
<td>{$v.name}</td>
</tr>
</foreach>
</table>
</body>
<script type="text/javascript" src="__PUBLIC__/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/lib/layer/2.4/layer.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__PUBLIC__/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/lib/laypage/1.2/laypage.js"></script>
<script>
//动态加载页面
var page = 0;//分页页码
$(window).bind('scroll', function () {//监控滚动条 到最底部时请求数据
if ($(document).scrollTop() == $(document).height() - $(window).height()) {
page++;
ajaxRead();
}
});
//请求数据
function ajaxRead() {
var html = "";
var url = "{:U('index/loadpage')}";
var data = {'page': page};
var index;
$.ajax({
type: 'post',
dataType: 'json',
url: url,
data: data,
beforeSend: function () {
//loading层
index = layer.load(1, {
shade: [0.1, '#fff'], //0.1透明度的白色背景
time:500
});
},
success: function (data) {
layer.close(index);
if (data.data.length == 0) {
layer.msg('已经到底!',{time:500});
} else if (data.status == 0) {
layer.msg(data.message,{time:500});
} else {
$.each(data.data, function (i, item) {
//遍历传来的数据 拼接html
html += '<tr><td>'+item.id+'</td>';
html += '<td>'+item.parentid+'</td>';
html += '<td>'+item.name+'</td></tr>';
});
$(".restable").append($(html));//写入页面
}
},
});
}
</script>
</html>