laravel怎么使用ajax分页
html部分:
<div class="page"> <!-------分页----------> @if($data['count'] > 5) <ul class="pagination"> @if($data['page'] !=1) <li> <a href="javascript:void(0)" onclick="page({{$data['prev']}})"><<</a> </li> @endif @foreach($data['pages'] as $k=>$v) @if($v == $data['page']) <li class="active"><span>{{$v}}</span></li> @else <li > <a href="javascript:void(0)" onclick="page({{$v}})">{{$v}}</a> </li> @endif @endforeach <li> <a href="javascript:void(0)" onclick="page({{$data['next']}})">>></a> </li> </ul> @endif <!-------分页---------->
分页CSS样式:
.page{ margin:20px 0 0 0; text-align:center; width:100%; overflow: hidden;} .page ul{} .page ul li{display: inline-block; margin:0; float:left;} .page ul li span,.page ul li a{margin: 0 2px;height: 26px;line-height: 26px;border-radius: 50%;width: 26px;text-align: center;display: inline-block;} .page ul li a {margin: 0 2px;height: 26px;line-height: 26px; border-radius: 50%;width: 26px;text-align: center;display: inline-block;} .page ul li.active span,.page ul li a:hover{background: #333;color: #FFF;} .page ul li.disabled span{background: #CCC; color: #FFF;} .page ul li a{color: #F33;border: #999 1px solid;}
ajax异步请求:
function page(page){ //加载层 layer.msg('数据加载中', { icon: 16, time: 1500, shade: 0.01 }); // 发异步请求完成分页 $.ajax({ type: "POST", url: '{{url('pages')}}', dataType: 'json', cache: false, data: { page: page, _token: "{{csrf_token()}}"}, success: function(msg) { if(msg){ $('.bloglist').html(msg); } } }); }
Laravel自定义逻辑部分:
public function page(Request $request,$num){ $page = $request->input('page', ''); // 获取当前页数 if(empty($page)) { $page = 1; } $count = Article::select('title')->count(); // 查询数据总条数 $rev = $num; // 每页显示条数 $sums = ceil($count / $rev); // 求总页数 $pages = array(); // 页数 for ($i = 1; $i <= $sums; $i++) { $pages[$i] = $i; } $prev = ($page - 1) > 0 ? $page - 1 : 1; // 设置上一页 $next = ($page + 1) < $sums ? $page + 1 : $sums; // 设置下一页 $offset = ($page - 1) * $rev; // 求偏移量 $data = Article::where('display', 0)->orderBy('time', 'desc')->skip($offset)->take($rev)->get(); // 跟据条件查询数据 return array( 'data' => $data, 'prev' => $prev, 'next' => $next, 'page' => $page, 'pages' => $pages, 'sums' => $sums, 'count' => $count ); }
Laravel异步分页请求,组织好内容返回给前端:
// 分页请求 public function getPage(Request $request){ $data = $this -> page($request,5); // 调分页方法每页显示 5条数据 $page = $request ->input('page',''); $res = ''; foreach($data['data'] as $val){ $res .= '<h3>'.$val->title.'</h3>'; $res .='<figure><img src="'.url($val->thumb).'"></figure>'; $res .='<ul>'; $res .='<p>'.$val ->desciption.'</p>'; $res .='<a title="'.$val->title.'" href="'.url('Article/'.$val->aid).'" target="_blank" class="readmore">阅读全文>></a>'; $res .='</ul>'; $res .='<p class="dateview"><span>'.date("Y-m-d",$val->time).'</span><span>作者:'.$val->editor.'</span></p>'; } $res .='<div class="page">'; $res .='<!-------分页---------->' ; if($data['count'] > 5){ $res .= '<ul class="pagination">'; if($page != 1){ $res .='<li >'; $res .='<a href="javascript:void(0)" onclick="page('.$data['prev'].')"><<</a>'; $res .='</li>'; } foreach($data['pages'] as $k=>$v){ if($v == $data['page']){ $res .='<li class="active"><span>'.$v.'</span></li>'; }else{ $res .='<li >' ; $res .='<a href="javascript:void(0)" onclick="page('.$v.')">'.$v.'</a>' ; $res .='</li>' ; } } if($page != $data['sums']){ $res .= '<li>'; $res .= "<a href='javascript:void(0)' onclick='page(".$data['next'].")'>>></a>" ; $res .= '</li>'; } $res .='</ul>'; } return json_encode($res); }