Laravel 5.1之Ajax无刷新分页

ajax无刷新分页的优点:
1、局部刷新 减轻压力
2、美观 提高用户体验
php代码:
/*
@Laravel框架
@Ajax无刷新分页(简单7步骤)
*/
public function page()
{
//1、查询数据库总条数
$count = count(Db::table('email')->get());
//2、设置每页显示条数
$rev = '4';
//3、求总页数
$sums = ceil($count/$rev);
//4、求单前页
$page = Input::get('page');
if(empty($page)){
$page = "1";
}
//5、设置上一页、下一页
$prev = ($page-1)>0?$page-1:1;
$next = ($page+1)<$sums?$page+1:$sums;
//6、求偏移量
$offset = ($page-1)*$rev;
//7、sql查询数据库
$data = Db::select("select * from email limit $offset,$rev");
//8、数字分页(可有可无)
$pp = array();
for($i=1;$i<=$sums;$i++){
$pp[$i]=$i;
}
return view('page.page',['data'=>$data,'prev'=>$prev,'next'=>$next,'sums'=>$sums,'pp'=>$pp,'page'=>$page]);
}
/*
@需要替换的部分页面
*/
public function page_pro(){
……前面的一样……
return view('page.page_pro', ['data'=>$data,'prev'=>$prev,'next'=>$next,'sums'=>$sums,'pp'=>$pp,'page'=>$page]);}
}
page.blade.php页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="Js/jquery.min.js"></script>
</head>
<body>
<div id="box">
<!-- 第一部分 -->
<a href="javascript:void(0)" οnclick="page(1)">首页</a>
<a href="javascript:void(0)" οnclick="page(<?php echo $prev ?>)">上一页</a>
<a href="javascript:void(0)" οnclick="page(<?php echo $next ?>)">下一页</a>
<a href="javascript:void(0)" οnclick="page(<?php echo $sums ?>)">尾页</a><br />
<!-- 第二部分 -->
@foreach($pp as $key=>$val)
@if($val == $page)
{{$val}}
@else
<a href="javascript:void(0)" οnclick="page({{$val}})">{{$val}}</a>
@endif
@endforeach
<!-- 表 -->
<table border="1" id="">
<tr>
<td>序号</td>
<td>名称</td>
<td>时间</td>
</tr>
@foreach($data as $val)
<tr>
<td>{{$val->email_id}}</td>
<td>{{$val->email_name}}</td>
<td>{{$val->email_time}}</td>
</tr>
@endforeach
</table>
</div>
</body>
</html>
<script>
/*
@分页
*/
function page(page){
$.ajax({
type:"get",
url:"page_pro",
data:{
page:page
},
success:function(msg){
if(msg){
$("#box").html(msg)
}
}
})
}
</script><span id="transmark" style="display: none; width: 0px; height: 0px;"></span>
page_pro.blade.php页面(需要替换的html)
与“page.blade.php”中 div 包着的部分一样
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值