Laravel-AJAX-分页
一.控制器
public function show(Request $request){ $posts = DB::table('posts') ->join('cate','posts.cate_id','=','cate.c_id') ->get(); $count = count($posts);//获取总记录数(你也可以获取带条件总数) $page = $request['page']??1; //获取当前页 $size = 2; //每页显示条数 //求总页数 $sums = ceil($count/$size); //设置上一页 下一页 $prev = ($page-1)>0?$page-1:1; $next = ($page+1)<$sums?$page+1:$sums; //偏移量 $offset = ($page-1) * $size; //文章数据 $posts = DB::table('posts') ->join('cate','posts.cate_id','=','cate.c_id') ->offset($offset) ->limit($size) ->get(); $data['post'] = $posts; $data['sums'] = $sums; $data['prev'] = $prev; $data['next'] = $next; //如果是ajax请求就返回json格式数据，否则就展示列表页面 if($request->ajax()){ return response()->json($data); }else{ return view('admin.posts.show',compact('posts','sums','prev','next')); } }
二.页面
@extends('layouts.main') @section('content') <body> <div id="body"> <ol class="breadcrumb"> <li class="active"><a href="#">系统</a></li> <li>文档</li> </ol> <div class="tablebox"> <table class="table table-bordered table-hover"> <thead> <tr> <th class="text-center" width="50"><input type="checkbox" id="check5-all" name="check5-all"> </th> <th class="text-center">ID</th> <th>标题</th> <th>图片</th> <th>所属栏目</th> <th>状态</th> <th>赞</th> <th>浏览量</th> <th>评论量</th> <th>发布日期</th> <th class="cell-small text-center"><i class="fa fa-bolt"></i> 操作</th> </tr> </thead> <tbody id="box"> @foreach($posts as $key=>$val) <tr> <td class="text-center"><input type="checkbox" id="check5-td1" name="check5-td1"></td> <td class="cell-small text-center">{{$val->id}}</td> <td><a href="javascript:void(0)">{{$val->title}}</a></td> <td><img src="{{$val->img}}" width="60px" height="60px"/></td> <td>{{$val->c_name}}</td> <td> @if($val->status == 1) <span class="label label-success">正常</span> @elseif($val->status == 2) <span class="label label-success">未审核</span> @else <span class="label label-success">其他</span> @endif </td> <td>{{$val->zan}}</td> <td>{{$val->views}}</td> <td>{{$val->comment}}</td> <td>{{date('Y-m-d H:i:s',$val->addtime)}}</td> <td class="text-center"> <div class="btn-group"> <a href="javascript:void(0)" class="btn btn-xs btn-info" data-toggle="tooltip" data-placement="top" title="前台预览"><i class="fa fa-info-circle"></i></a> <a href="javascript:void(0)" class="btn btn-xs btn-success" data-toggle="tooltip" data-placement="top" title="修改"><i class="fa fa-pencil"></i></a> <a href="javascript:;" class="btn btn-xs btn-danger delbtn" data-toggle="tooltip" data-placement="top" title="删除"><i class="fa fa-trash-o"></i></a> </div> </td> </tr> @endforeach </tbody> </table> </div> <div class="fy"> <ul class="pagination"> <li> <a href="javascript:void(0)" onclick="page(1)">首页</a> </li> <li> <a href="javascript:void(0)" onclick="page({{$prev}})" id="up">上一页</a> </li> @for($i=1;$i<=$sums;$i++) <li><a href="javascript:void(0)" onclick="page({{$i}})">{{$i}}</a></li> @endfor <li> <a href="javascript:void(0)" onclick="page({{$next}})" id="down">下一页</a> </li> <li> <a href="javascript:void(0)" onclick="page({{$sums}})">尾页</a> </li> </ul> </div> </div> </body> @endsection
三.JS
<script>
function page(page) {
$.ajax({
type:"get",
url:"http://www.blog1904a.com/posts/show?page="+page,
dataType:'json',
success:function(res){
var str = '';
var data = res.post;
$(data).each(function (k,v) {
//console.log(v.title);
str+= '<tr>';
str+= '<td></td>';
str+= '<td>'+v.id+'</td>';
str+= '<td>'+v.title+'</td>';
str+= '<td><img src='+v.img+' height="60px" width="60px"/></td>';
str+= '<td>'+v.c_name+'</td>';
if(v.status == 1){
str+= '<td>通过</td>';
}else{
str+= '<td>未审核</td>';
}
str+= '<td>'+v.zan+'</td>';
str+= '<td>'+v.comment+'</td>';
str+= '<td>'+v.views+'</td>';
str+= '<td>'+v.addtime+'</td>';
str+= '</tr>';
});
$("#box").html(str);
$("#up").attr({onclick:"page("+res.prev+")"});
$("#down").attr({onclick:"page("+res.next+")"});
}
})
}
</script>
