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>
AJAX 模型无刷新分页
路由：
Route::group(['namespace'=>'Task'],function (){ Route::get('task13/index','task13\WorkController@index')->name('task13.index'); });
laravel 控制器：
public function index(Request $request) { $posts = Task13::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 = Task13 ::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('task.task13.index',compact('posts','sums','prev','next')); } }
HTML页面
<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> {{-- {{$data->appends(request()->except('page'))->links()}}--}} {{-- {{$data->links()}}--}} </div> </div>
// ajax分页 function page(page) { $.ajax({ type:"get", url:"http://www.yan.com/task13/index?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><input type="checkbox" value="{{$item->id}}" name="id[]"></td>'; str+= '<td>'+v.id+'</td>'; str+= '<td>'+v.id+'</td>'; str+= '<td>'+v.time+'</td>'; str+= '<td>'+v.order+'</td>'; str+= '<td>'+v.name+'</td>'; str+= '<td>'+v.code+'</td>'; str+= '<td>'+v.source+'</td>'; str+= '<td>'+v.type+'</td>'; str+= '<td>'+v.cost_type+'</td>'; str+= '<td>'+v.pay+'</td>'; str+= '<td>'+v.payment+'</td>'; if(v.status == 1){ str+= '<td>通过</td>'; }else{ str+= '<td>未审核</td>'; } str+= '</tr>'; }); $("#box").html(str); $("#up").attr({onclick:"page("+res.prev+")"}); $("#down").attr({onclick:"page("+res.next+")"}); } }) }
浙公网安备 33010602011771号