Laravel 5.1之Ajax无刷新分页

最新推荐文章于 2022-04-28 17:41:25 发布

龙凤呈祥_

最新推荐文章于 2022-04-28 17:41:25 发布

阅读量6k

点赞数 3

分类专栏： php 文章标签： pspan styledisplay n span styledisplay no 分span styledisplay n

本文链接：https://blog.csdn.net/ice5211314/article/details/52643458

版权

php 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

 
 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
评论
Laravel 5.1之Ajax无刷新分页

@Laravel框架@Ajax无刷新分页(简单7步骤)//1、查询数据库总条数//2、设置每页显示条数//3、求总页数//4、求单前页//5、设置上一页、下一页//6、求偏移量//7、sql查询数据库//8、数字分页(可有可无)
复制链接

扫一扫