创建时间：2017-03-09
使用layui前端框架进行ajax分页
获取总记录数可以通过模板赋值，也可以用ajax来获取总记录数，看项目需要
模板赋值方法
前端DOM结构
阿里云盘资源
网盘资源搜索
<div id="left-4" class="left-4">
{php}foreach($data['share'] as $v){{/php}
<div class="box">
<a href="{:url('share_content')}?id={$v['id']}" title="{$v['id']}" class="click">
<p>
<span class="title">{$v['title']}</span>
<span>发布于:{$v['create_time']}</span>
<span>阅读({$v['total']})</span>
<span>评论({$v['total']})</span>
<span>点赞({$v['total']})</span>
</p>
</a>
</div>
{php}}{/php}
</div>
<div class="page-box claer-fixed">
<div class="text">
<span class="zg">{$data['zong']}</span>条数据，共
<span class="dq"></span>页，当前显示第
<span class="show">{$data['page']}</span>页
</div>
<div id="page-data"></div><!--lyaui分页，采用跳转分页模式，如果是采用ajax分页时，本分页模式为hide模式-->
</div>前端Js
var pageZong = 100;//通过模板赋值，总记录数
var showPage = 20;//每页显示条数 //加载layui框架
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;
laypage({
cont: 'page_data'//容器
//得到总记录数，除于需要显示的页数，向上取整，得到总页数
,pages: Math.ceil(pageZong/showPage)
,first: false//不显示首页项
,last: false//不显示尾页项
,groups:3//连续分页数
,jump: function(obj, first){
//得到了当前页，用于向服务端请求对应数据
var curr = obj.curr;
$.ajaxSetup({async:false});//ajax开启同步提交
layer.load();//显示动画
setTimeout(function(){
$.getJSON('{:url("index/ajaxPage")}',{"a":curr},function(msg){
$(".box").remove();//移除节点
layer.closeAll('loading');//关闭动画
for(var i=0;i<msg.length;i++) {
$("#left-4").append('<div class="box"><p><span class="title">'
+msg[i]["title"]
+'</span><span>发布于:'+msg[i]["create_time"]
+'</span><span>阅读:('+msg[i]["total"]
+')</span><span>评论:('+msg[i]["total"]
+')</span><span>赞:('+msg[i]["total"]
+')</span></p><div>')
}
});
},500);
}
});
});ajax前端返回的 json数据结构
控制器方法
//ajax分页
public function ajaxPage($a){
$db = Model("admin/Share");
$num = 20;//一页显示多少条
$data['zong'] = $db->getZong();//总记录数
$arr = $db->getShare($a,$num);//得到分页数据
$this->assign('data',$data);
return $arr;
}模型
//获取分页数据，只要显示的
public function getShare($a,$num){
$page = ($a-1)*$num;
return Db::query("select * from {$this->tb} where disable='1' order by id desc limit {$page},{$num}");
}
//获取数据总记录数
public function getZong(){
$zong = Db::query("select count(*)zong from {$this->tb}");
return $zong[0]['zong'];
}用ajax来获取总记录数的分页写法
js
//ajax分页
var pageZong = 0;//总记录数
var showPage = 20;//每页显示条数
//ajax同步提交获取数据，以及分页操作
function shareTypeData(str,url,type) {
$(str).click(function () {
layer.load();//显示加载动画
$.ajaxSetup({async: false});//ajax开启同步提交
//先用aja去后台获取当前type记录的总记录数
$.getJSON(url, {"limit":1, "type": type}, function (msg) {
num = msg.data.length-1;//数组下标是从0开始的 所以要减- 才能正常取到数据
pageZong =msg.data[num]['zong'];//获取最后一个数组里面的值，得到总记录数
});
$(".page-box").append('<div id="ajaxPage" style="float:right"></div>');//创建一个节点，用layui来做ajax分页
$("#page-data").remove();//移除原来的跳转分页的盒子模型
//加载layui分页模块
layui.use(['laypage', 'layer'], function () {
var laypage = layui.laypage
, layer = layui.layer;
laypage({
cont: 'ajaxPage'//容器
//得到总记录数，除于需要显示的页数，向上取整，得到总页数
, pages:Math.ceil(pageZong/showPage)
, first: false//不显示首页项
, last: false//不显示尾页项
, groups: 3//连续分页数
, jump: function (obj, first) {
//得到了当前页，用于向服务端请求对应数据
var curr = obj.curr;
//延时500毫秒用来显示动画
setTimeout(function () {
//ajax发送当前页，以及需要的type记录
$.getJSON(url, {"limit": curr, "type": type}, function (msg) {
layer.closeAll('loading');//关闭加载动画
$(".box").remove();//移除原来的数据节点
//遍历返回来的数据，添加到DOM节点中
for (var i = 0; i < msg.data.length-1; i++) {
$("#left-4").append('<div class="box"><p><span class="title">'
+ msg.data[i]["title"]
+ '</span><span>发布于:' + msg.data[i]["create_time"]
+ '</span><span>阅读:(' + msg.data[i]["total"]
+ ')</span><span>评论:(' + msg.data[i]["total"]
+ ')</span><span>赞:(' + msg.data[i]["total"]
+ ')</span></p><div>')
}
//更新节点数据
$(".zg").text(pageZong);//总记录数
$(".dq").text(Math.ceil(pageZong/showPage));//总页数
$(".show").text(curr);//当前页
});
}, 500);
}
});
});
})
}
shareTypeData(".hs","{:url('tool/shareTypeData')}",1);
shareTypeData(".js","{:url('tool/shareTypeData')}",2);
shareTypeData(".php","{:url('tool/shareTypeData')}",3);
shareTypeData(".sj","{:url('tool/shareTypeData')}",4);
shareTypeData(".yuedu","{:url('tool/shareTypeData')}",5);模型
//根据type字段值获取数据
//1.HTML+CSS、 2.JS、 3.PHP
//获取type字段值为2记录 JS代码案例
//showPage 为当前页
public function typeData($int,$showPage){
$showPage = ($showPage-1)*20;
$arr = Db::query("select * from {$this->tb} where type={$int} limit {$showPage},20");
$zong = Db::query("select count(*)zong from {$this->tb} where type={$int}");//获取总记录数
array_push($arr,array('zong'=>$zong[0]['zong']));//在$arr数组后面压一个数组进去
if(!empty($arr[0])){
$this->info['code'] = 200;
$this->info['tips'] = '获取数据成功';
$this->info['data'] = $arr;
}else{
$this->info['code'] = 200;
$this->info['tips'] = '获取数据成功';
$this->info['data'] = $arr;
}
return $this->info;
}控制器方法
//案例分享列表页面 通过ajax获取记录
//$type 需要获取的数据类型 1、html+CSS 2、javaScript 3、php
//$limit 当前页
public function shareTypeData($type,$limit){
$db = model("admin/share");
switch($type){
case 1:
$arr = $db->typeData($type,$limit);//获取html+CSS
break;
case 2:
$arr = $db->typeData($type,$limit);//获取javaScript
break;
case 3:
$arr = $db->typeData($type,$limit);//获取PHP
break;
case 4:
$arr = $db->createTimeData($limit);//根据创建时间来获取数据
break;
case 5:
$arr = $db->yueduData($limit);//根据阅读量来获取数据
break;
}
return json($arr);
}