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

            }

        })

    }

巴特西

Laravel-AJAX-分页

最新文章

热门文章