tp5+ajax+jq实现无刷新分页

- 日理万妓 2022-05-08 21:06 226阅读 0赞

> tp5框架里面自带有panigate()+rende()的方法可以超简单的实现分页，但是就是看着一直要刷新很不爽，所以找了网上的好多代码，终于找到了一个逻辑简单的无刷新分页，以下是我更改适合之后实现的效果
> 
> 代码里面有详细注释了，就不多说了，说明一下分页查询的原理吧：***点击一个分页按钮，ajax向后端传一个页码（curPage）参数，变换起始位置达到分页的效果，然后通过查询方法limit('起始位置','显示数量'）查询数据并渲染；***
> 
> ***html代码：***
> 
>  
> 
>     <!DOCTYPE html>
>     <html>
>     <head>
>         <meta charset="UTF-8">
>         <title>测试</title>
>         <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css">
>         <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
>     </head>
>     <style>
>         #pageBar {
>             text-align: right;
>             padding: 0 20px 20px 0;
>         }
>     
>         .pageBtn a {
>             display: inline-block;
>             border: 1px solid #aaa;
>             padding: 2px 5px;
>             margin: 0 3px;
>             font-size: 13px;
>             background: #ECECEC;
>             color: black;
>             text-decoration: none;
>             -moz-border-radius: 2px;
>             -webkit-border-radius: 3px;
>         }
>     
>         .pageBtn-selected a {
>             display: inline-block;
>             border: 1px solid #aaa;
>             padding: 2px 5px;
>             margin: 0 3px;
>             font-size: 13px;
>             background: #187BBD;
>             color: white;
>             text-decoration: none;
>             -moz-border-radius: 2px;
>             -webkit-border-radius: 3px;
>         }
>     
>         .pageBtn a:hover {
>             background: #187BBD;
>             color: white;
>         }
>     </style>
>     <body>
>     
>     <div class="jumbotron">
>     
>         <div id="data-area">
>             <ul>　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　</ul>
>         </div>
>         <div id="pageBar"></div>
>     
>     </body>
>     
>     
>     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
>     <script src="__STATIC__/index/js/ajaxPage.js"></script>
>     </html>
> 
>

***php代码（控制器）：***

<?php
    
    namespace app\index\controller;
    use think\Controller;
    class Index extends Controller
    {
        /**
         * @return mixed
         * 主页
         */
        public function index()
        {
            return $this->fetch();
    
        }
    
        /**
         * @throws \think\db\exception\DataNotFoundException
         * @throws \think\db\exception\ModelNotFoundException
         * @throws \think\exception\DbException
         * 分页数据处理查询
         * :ajax查询返回数据
         */
        public function getPage(){
            if(request()->isAjax()){
    
        //1.获取数据（curPage）
                $page=input('get.');
                $curPage = $page['curPage'];
    
         //2.定义分页所需的数据
                $totalItem = '10';   //总记录数(自行定义)
                $pageSize='4';  //每一页记录数(自行定义)
                $totalPage =ceil($totalItem/$pageSize);  //总页数
                $startItem = ($curPage-1) * $pageSize;//根据页码来决定查询数据的节点
    
                //3.查询数据
                $res=db('content')
                    ->limit($startItem,$pageSize)
                    ->select();
    
                //4.放入所有数据
                $arr['totalItem']=$totalItem;
                $arr['pageSize']=$pageSize;
                $arr['totalPage']=$totalPage;
                foreach($res as $lab) {
                    $arr['data_content'][] = $lab;
                }
    
               //5.结果返回（此处没有判定是否查询成功）
                $this->result($arr,'1','成功','json');
    
            }
        }
    
    }

***ajaxPage.js代码：***

var curPage;        //当前页数
    var totalItem;      //总记录数
    var pageSize;       //每一页记录数
    var totalPage;      //总页数
    
    // curPage = getUrlParam('page')
    
    /**
     * 获取url里面的参数(name)!!!!个人私藏
     *
     **/
    /*   function getUrlParam(name) {
           var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
           var r = window.location.search.substr(1).match(reg);  //匹配目标参数
    
           if (r != null)
               return unescape(r[2]);
           return null; //返回参数值
       }*/
    
    //获取分页数据
    function turnPage(page) {
        $.ajax({
            type: 'get',
            url: 'getPage',     //这里是请求的后台地址，自己定义
            data: {'curPage': page},
            dataType: 'json',
            beforeSend: function () {
                $("#data-area ul").append("加载中...");
            },
            success: function (data) {
    
                $("#data-area ul").empty();       //移除原来的分页数据
                totalItem = data.data.totalItem; // 返回的总记录数
                pageSize = data.data.pageSize; //返回的每一页记录数
                curPage = page; //返回的当前页码
                totalPage = data.data.totalPage; //返回的总页数
    
                console.log("totalItem:"+totalItem);
                console.log("pageSize:"+pageSize);
                console.log("curPage:"+curPage);
                console.log("totalPage:"+totalPage);
    
                var data_content = data.data.data_content; //返回的数据内容
                console.log(data_content);
                var data_html = ""; //数据输出的html代码
    
                //添加新的分页数据（数据的显示样式根据自己页面来设置，这里只是一个简单的列表）
                $.each(data_content, function (index, array) {
                    data_html += "<li>" + array['id'] + " " + array['title'] + " " + array['article'] + " " + array['time'] + "</li>";
                }); //遍历数据，形成html代码
    
                $("#data-area ul").append(data_html); //输出html代码
                getPageBar();
            },
            /*            complete: function() {    //添加分页按钮栏
                           getPageBar();
                        },*/
            error: function () {
                alert("数据加载失败");
            }
        });
    }
    /*    curPage;    //当前页数
          totalItem;  //总记录数
          pageSize;   //每一页记录数
          totalPage;  //总页数
        */
    //获取分页条（分页按钮栏的规则和样式根据自己的需要来设置）
    function getPageBar() {
        //防止数据错误时候出现当前页数大于总页数
        if (curPage > totalPage) {
            curPage = totalPage;
        }
        //防止数据错误时候出现当前页数小于第一页
        if (curPage < 1) {
            curPage = 1;
        }
        //定义分页按钮html代码
        pageBar = "";
    
        //如果不是第一页
        if (curPage != 1) {
            pageBar += "<span class='pageBtn'><a href='javascript:turnPage(1)'>首页</a></span>";
            pageBar += "<span class='pageBtn'><a href='javascript:turnPage("+(curPage-1)+")'>上一页</a></span>";
        }
    
        //显示的页码按钮(5个)
    
        //定义start 和end两个变量准备循环输出可见的分页按钮
        var start, end;
        if (totalPage <= 5) {
            start = 1;
            end = totalPage;
        } else {
            //当前页码与总页数相差1个的时候，要显示之前的页码
            if (totalPage - curPage < 2) {
                start = totalPage - 4;
                end = totalPage;
            } else {
                //显示前面两个和后面两个
                start = curPage - 2;
                end = curPage + 2;
            }
        }
        //循环输出分页按钮
        for (var i = start; i <= end; i++) {
    
            if (i == curPage) {
                pageBar += "<span class='pageBtn-selected'><a href='javascript:turnPage(" + i + ")'>" + i + "</a></span>";
            } else {
                pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + i + ")'>" + i + "</a></span>";
            }
        }
    
        //如果不是最后页,显示输出“下一页 ， 末页”
    
        if (curPage != totalPage) {
            pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + (parseInt(curPage) + 1) + ")'>下一页</a></span>";
            pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + totalPage + ")'>末页</a></span>";
        }
        //匹配改变pageBar里面的内容
        $("#pageBar").html(pageBar);
    }
    
    //页面加载时初始化分页
    $(function () {
        turnPage(1);
    });

转载自：[https://blog.csdn.net/abc455050954/article/details/79510197][https_blog.csdn.net_abc455050954_article_details_79510197]

[https_blog.csdn.net_abc455050954_article_details_79510197]: https://blog.csdn.net/abc455050954/article/details/79510197