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+")"});
            }
        })
    }
复制代码

 

 
































复制代码
posted @   王越666  阅读(88)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae