浅谈TP5的ajax无刷新分页

简单说一下如何进行TP5的ajax无刷新分页吧，这个功能实现的方法有千百种，或许我提供的这一种并不是最好的，但确实是很实用的。

以下的例子会使用TP5自带的分页类来实现，无任何修改。

首先来一段后台查询数据的代码，查询出相关的数据

    $list = Loader::model('Admin')->alias('a')->field('user_id,username,realname,seller_hotel_name,status,role_name,last_login_time')->join('est_rbac_role r','a.role_id = r.role_id','left')->join('est_seller s','a.seller_id = s.seller_id','left')->paginate(9);
    //渲染分页按钮
    $page = $list->render();
    //转换为数据
    $list = $list->toArray()['data'];
    //前台ajax分页，如果是ajax请求的话就会进入该区间，下面的代码就不会执行
    if($request->isAjax()){
        $data = $list; 这一段是将数据赋值给一个数组，这个数组用于ajax请求返回给前端
        $data['page'] = $page; 这个是分页的按钮
        $data['status'] = 1; 状态码
        return json($data); 返回json格式的数据
    }
    $this->assign('list',$list);
    $this->assign('page',$page);
    return $this->fetch();

$list就是这次需要分页的数据，这里是使用了TP5的模型来查询数据,调用paginate方法，参数就是每页的条数。

然后再展示前端的代码

首先是分配数据还有分页按钮到前台，这是使用了TP5的foreach标签，相信大家都不陌生

    <div class="box-body table-responsive no-padding">
        <table class="table table-bordered table-hover dataTable">
            <thead>
                <tr>
                    <th>用户名</th>
                    <th>姓名</th>
                    <th>角色</th>
                    <th>最后一次登录时间</th>
                    <th>所属平台</th>
                </tr>
           </thead>
           <tbody class="list">
             {foreach name="list" item="vo"}
                <tr>
                   <td>{$vo.username}</td>
                   <td>{$vo.realname}</td>
                   <td>{$vo.role_name}</td>
                   <td>{$vo.last_login_time}</td>
                   <td>{$vo.seller_hotel_name}</td>
                </tr>
             {/foreach}
           </tbody>
       </table>
     <div class="page">
         {$page}
     </div>
    </div>

再列出JS的代码，本次的无刷新是通过禁用a标签的默认跳转，将所得的数据替换之前的数据来实现的。

    $('.page').delegate('a','click',function(){
        var url = $(this).attr('href'); 这个url就是将要访问的地址
        $.ajax({
            url:url,
            success:function(res){
                page(res); page方法用于替换数据
            }
        })
        return false; 这里就是阻止a标签默认跳转的行为
    });
    function page(res){
        tr = ''; 准备一个容器
        $('.page').html(res.page); 请求到后台的数据，替换之前分页按钮
        delete res.page;删除之前返回的分页按钮 说一下为什么要删除这个吧.因为返回的json中,page也是其中的一个下标，也会进入for循环中，所以要提前删掉，不然会出现undefined的情况。
        delete res.status;删除之前后台返回的状态码
        for(var k in res){
                //这里是拼接html标签
            tr+='<tr><td>'+res[k].username+'</td><td>'+res[k].realname+'</td><td>'+res[k].role_name+'</td><td>'+res[k].last_login_time+'</td><td>'+res[k].seller_hotel_name+'</td></tr>';
        }
        $('.list').html(tr);//把数据覆盖到所需要填充数据的地方
    }

写到这里基本就已经实现了TP5的AJAX无刷新分页。
---------------------
作者：change被占用
来源：CSDN
原文：https://blog.csdn.net/qq_35765928/article/details/79877591
版权声明：本文为博主原创文章，转载请附上博文链接！