Laravel-AJAX-分页
阅读原文时间:2023年07月09日阅读:3
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')


    <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

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()}}--}}


// 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+")"});  
        }  
    })  
}