03-08 03:43 阅读 109

tp5 实现ajax分页

tp5框架里面自带有panigate()+rende()的方法可以超简单的实现分页，但是就是看着一直要刷新很不爽，所以找了网上的好多代码，终于找到了一个逻辑简单的无刷新分页，以下是我更改适合之后实现的效果

首先是后台代码（这里展示和分页用的是一个方法）

php代码示例

 public function index(){
        $data = \app\homes\model\Goods::with(‘Types‘)->paginate(2);
        //渲染分页按钮
        $page = $data->render();
        //转换为数据
        $list = $data->toArray()[‘data‘];
        //前台ajax分页，如果是ajax请求的话就会进入该区间，下面的代码就不会执行
        if(\request()->isAjax()){
            $data = $list; //这一段是将数据赋值给一个数组，这个数组用于ajax请求返回给前端
        $data[‘page‘] = $page; //这个是分页的按钮
        $data[‘status‘] = 1; //状态码
        return json($data); //返回json格式的数据
    }
        return view(‘show/show‘,[‘data‘=>$data,‘list‘=>$list,‘page‘=>$page]);
    }

第二步 HTML代码

把分页按钮渲染出来

    <div class="list">
        {$page}
    div>

第三步 jquery代码

这里需要用到两个方法

第一个：

 $(‘.list‘).delegate(‘a‘,‘click‘,function(){
        var url = $(this).attr(‘href‘); //这个url就是将要访问的地址
        $.ajax({
            url:url,
            success:function(res){
                page(res); //page方法用于替换数据
            }
        })
        return false; //这里就是阻止a标签默认跳转的行为
    });

第二个：这里的 tr 是替换的html标签我这里用的是模板替换所以代码多了点

  function page(res){
        tr = ‘‘; //准备一个容器
        $(‘.list‘).html(res.page); //请求到后台的数据，替换之前分页按钮
        delete res.page;//删除之前返回的分页按钮 说一下为什么要删除这个吧.因为返回的json中,page也是其中的一个下标，也会进入for循环中，所以要提前删掉，不然会出现undefined的情况。
        delete res.status;//删除之前后台返回的状态码
        for(var k in res){
            //这里是拼接html标签
            tr+=‘‘;
            tr+=‘‘+‘‘+‘‘;
            tr+=‘‘+res[k].gid+‘‘;
            tr+=‘‘;
            tr+=‘‘+res[k].gname+‘‘;
            tr+=‘‘+res[k].gprice+‘‘;
            tr+=‘‘+res[k].gstate+‘‘;
            tr+=‘‘+res[k].gtime+‘‘;
            tr+=‘‘+res[k].tname+‘‘;
            tr+=‘‘
            tr+=‘\n‘ +
                ‘                        \n‘ +
                ‘                        \n‘ +
                ‘                    
‘
            tr+=‘‘;
            tr+=‘‘;

        }
        $(‘#mylist‘).html(tr);//把数据覆盖到所需要填充数据的地方
    }

效果：

原文：https://www.cnblogs.com/guobusong/p/15217584.html