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

分页加省略号是参考tp6的分页里的省略号逻辑做的

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');    
                }
            });            
        }
        //大广告轮播图 S
        var swiperJson = {
            autoHeight: true,
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: true
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            }
        };
        if ($("#banner .swiper-slide").length <= 1) {
            swiperJson['loop'] = false;
            swiperJson['autoplay'] = "";
            swiperJson['pagination'] = "";
            swiperJson['resistanceRatio'] = 0;
        }
        var swiper = new Swiper('#banner .swiper-container', swiperJson);
        //大广告轮播图 E
    </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>';
        }
        // 分页
        $last = $page-1;
        $is_last = $last == 0?1:$last; 
        $next = $page+1;
        if($page_num>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>";
        }


        if($page_num<12){ 
            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>";
                }
            }
        }else if($page<=6){
            // 左边8个，后面2个
            for ($i=1; $i <= 8; $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>";
                }
            }
            $page_html .= "<a class='num' ' href='javascript:void(0)'>......</a>";
            for ($i=$page_num-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>";
                }
            }
        }else if($page>$page_num-6){
            for ($i=1; $i <= 2; $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>";
                }
            }
            $page_html .= "<a class='num' ' href='javascript:void(0)'>......</a>";
            for ($i=$page_num-7; $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>";
                }
            }
        }else{
            for ($i=1; $i <= 2; $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>";
                }
            }
            $page_html .= "<a class='num' ' href='javascript:void(0)'>......</a>";
            for ($i=$page-2; $i <= $page; $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>";
                }
            }
            for ($i=$page+1; $i <= $page+2; $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>";
                }
            }
            $page_html .= "<a class='num' ' href='javascript:void(0)'>......</a>";
            for ($i=$page_num-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 = compact('html','page_html');
        return json(['status'=>1,'msg'=>'获取信息成功','data'=>$data]);
    }