thinkphp6 实现异步分页（版本1）

功能：点击分类显示该分类对应的内容，并且可以异步分页

思路：

    /**

     * 1.接收前台传过来的页码

     * 2.如果每页显示2条，传过来的页码page是2，则查询应该是->limit(2,2)表示从第3条数据开始查，取两条数据

     * 第二页是从下标为2的数据开始（0，1，2），第三页是从下标为4的数据开始$fen-$limit就是为了解决这个问题

     * 3.算出分页总数

     * 4.循环数据，拼接新闻内容

     * 5.循环分页总数，拼接分页页面

     * 6.返回数据给前端，前端html（）插入数据

     */

index.html

    <!-- 内容S -->
    <div class="main-nav">
        <div class="itemwrap text-center">
            <div class="main-nav-inner">
                {volist name="news_category" id="vo" key="k" }
                    <a href="javasctipt:" class="main-nav-link category" data-c_id = "{$vo['id']}" >{$vo.name} </a>
                {/volist}
            </div>
        </div>
    </div>

    <div class="news-main">
        <div class="itemwrap">
            <!-- 新闻内容 -->
            <div class="newsList-main">

            </div>  
            <!-- 分页 -->
            <div class="pagelist">
                <div class="pagelist-inner">

                </div>
            </div>            
        </div>
    </div>    
    <!-- 内容E -->


    <script>
        // 进入页面异步加载新闻内容
        $(function(){
            var ca_id = $(".main-nav-inner").children(":first").attr("data-c_id")
            ajax_post(ca_id)
        })
        // 点击分页获取对应新闻内容
        function getPage(obj){
           var page = $(obj).attr("data-page") 
           var category_id = $(obj).attr("data-cid")
           ajax_post(category_id,page) 
        }
        // 点击分类获取对应新闻内容
        $('.category').click(function(){
            var category_id = $(this).attr("data-c_id")
            ajax_post(category_id)
        })                  
        function ajax_post(category_id,page=1){
            $.ajax({
                type: 'post',
                url: "{:url('index/news/listNews')}",
                data : {category_id:category_id,page:page},
                success: function(data){
                    if (data.status == 1) {
                        $('.newsList-main').html(data.data.html)
                        $('.pagelist-inner').html(data.data.page_html)
                    }else{
                            layer.msg(data.msg,{icon: 2,time: 1000},function () {
                        })
                    }

                },			
                error:function(){
                //抛出异常
                // alert('error');    
                }
            });            
        }

    </script>

php:

    public function listNews(){
        $category_id = input('post.category_id');
        //分页主要看这里
        $page = input('page',1);//当前页
        $limit = 1;
        //从第几条数据开始查
        $fen = $page*$limit;
        
        $count_num = Db::table('news')->where(['category_id'=>$category_id])->count();
        //总分页数量
        $page_num  = intval(ceil($count_num/$limit));
        $res  = Db::table('news')->where(['category_id'=>$category_id])->order('id desc')->limit($fen-$limit,$limit)->select();
        //分页主要看这里    
        $html = '';
        $page_html = '';
        //拼接新闻内容
        foreach ($res as $key => $value) {
           $html .= '<div class="newsList-item"><div class="left clearfix"><div class="item-date text-center"><div class="date-day">';
           $html .= date('d',$value['posttime']);
           $html .= '</div><div class="date-year-month">';
           $html .= date('Y-m',$value['posttime']);
           $html .= '</div></div><div class="item-cover"><a href="javascript:void(0);"><img src="';
           $html .= $value['img'];
           $html .= '"></a></div></div><div class="right"><div class="item-title text-cut2"><a href="/index/news/detail?id=';
           $html .= $value['id']; 
           $html .= '">';
           $html .= $value['title'];
           $html .= '</a></div><div class="item-desc text-cut2">';
           $html .= $value['subtitle'];
           $html .= '</div></div></div>';
        }
        //分页主要看这里
        if($page_num>1){
            $last = $page-1;
            $is_last = $last == 0?1:$last; 
            $next = $page+1;
            //上一页
            if($last<=0){
                $page_html .= "<span><</span>";
            }else{
                $page_html .= "<a class='last' data-page = '$is_last' data-cid = '$category_id' onclick='getPage(this)' href='javascript:void(0)'><</a>";
            }
            //页码
            for ($i=1; $i <= $page_num; $i++) { 
                if($page ==$i){
                    $page_html .= "<span class='current'>$i</span>";
                }else{
                    $page_html .= "<a class='num' data-page = '$i' data-cid = '$category_id' onclick='getPage(this)' href='javascript:void(0)'>$i</a>";
                }
            }
            //下一页
            if($next>$page_num){
                $page_html .= "<span>></span>";
            }else{
                $page_html .= "<a class='next' data-page = '$next' data-cid = '$category_id' onclick='getPage(this)' href='javascript:void(0)'>></a>";
            }

        }
        
        $data = [
            'html'=>$html,
            'page_html'=>$page_html
        ];

        return json(['status'=>1,'msg'=>'获取信息成功','data'=>$data]);
    }