PHP实现分页功能（二）百度分页样式，固定分页个数

╰半橙微兮° 2022-12-08 04:23 219阅读 0赞

以下方法是基于THINKPHP5框架开发，实现百度分页样式的分页功能，固定分页个数。如下图  
![在这里插入图片描述][20200917161122429.png_pic_center]  
![在这里插入图片描述][20200917161142931.png_pic_center]  
![在这里插入图片描述][2020091716120186.png_pic_center]  
此类分页样式，固定分页的个数，比如百度固定为每次显示10个页数；通过对比发现，当前页大于等于6时，结尾页数总是比当前页多出四个，直到显示完总页数  
下面我们就模仿百度分页功能实现可以调节的分页功能

下面的分类代码，还是根据我的上一篇[PHP实现分页功能（一）上一页/下一页][PHP]基础分页功能代码进行修改开发

控制器代码（与基础版本的分页控制器相比，多两个参数）

/* *分页功能 * 参数：p 当前页码数 * listpage 每页显示的数据条数 * totalpage 总页数 * fenye 分页条数，例如百度的是10 * qiehuan 分页数字切换点，例如百度的是6 * */
    public function index(){ 
    	$p=input('p',1,'intval');//当前页码数，默认显示第一页
    	$listpage=input('listpage',8,'intval');//每页显示的数据条数
    	$count=Db::name('shujubiao')->count();//数据总数
    	$totalpage=ceil($count/$listpage);//总页数
    	$fenye=input('listpage',10,'intval');//分页条数
        $qiehuan=input('listpage',6,'intval');//分页数字切换点
        /* * $p<=$qiehuan * 当前页小于等于切换点的时候，分页第一个数字始终是1 * 尾数：如果总页数$totalpage小于等于分页条数$fenye，尾数就是总页数$totalpage * 如果总页数$totalpage大于分页条数$fenye，尾数就是分页条数$fenye * * $p>$qiehuan * 当前页大于切换点时， * 分页条数$fenye-切换点$qiehuan = 当前页数到尾数的分页个数 * 尾数：当前页数+当前页数到尾数的分页个数，此时 * 如果尾数大于总页数$totalpage，那么尾数=总页数$totalpage， * 如果尾数小于等于总页数$totalpage，那么尾数=当前页数+当前页数到尾数的分页个数 */
        if($p<=$qiehuan){ 
        	$start=0;/*开始页数,代表第一个数为1*/
            $end = $totalpage>=$fenye?$fenye:$totalpage;/*结束页数*/
        }else{ 
            $end = $p +($fenye-$qiehuan)>$totalpage?$totalpage:$p +($fenye-$qiehuan);
            $start = $end-$p<=$fenye-$qiehuan?$end-$fenye:$p -$qiehuan;
        }
    	$product=Db::name('shujubiao')->page($p,$listpage)->select();
    	
    	$this->assign('product',$product);
    	$this->assign('p',$p);
    	$this->assign('totalpage',$totalpage);
    	$this->assign('start',$start);
        $this->assign('end',$end);
    	return $this->view->fetch('页面');
    }

前端代码，样式自行调试

<div class="page_box">
    	<div class="p_b_c">
            
             <input type="hidden" id="page" value="{$p}">
             <input type="hidden" id="totalpage" value="{$totalpage}">
    
             <div id="prev-page" class="pn_btn prev-page"></div>
             <ul>
                 {for start="$start" end="$end"}
                 <li onclick="huan({$i+1})">{$i+1}</li>
                 {/for}
             </ul>
             <div id="next-page" class="pn_btn next-page"></div>
         </div>
     </div>

js代码

//分页
    //当前页跳转
    function huan(page) { 
        location.href = "/模块名/控制器名/方法名/p/" + page + '.html';
    }
    /* * 上一页功能 * */
    $(document).on('click', '#prev-page', function() { 
        var page = $("#page").val(); //获取当前分页
        page--;
        if (page < 1) { 
            page = 1;
            alert('已经是第一页了');
            return false;
        }
        location.href = "/模块名/控制器名/方法名/p/" + page + '.html';
    });
    
    /* * 下一页功能 * */
    $(document).on('click', '#next-page', function() { 
        var page = $("#page").val(); //获取当前分页
        var totalpage = $("#totalpage").val();
        page++;
        if (page > totalpage) { 
            page = totalpage;
            alert('已经是最后一页了');
            return false;
        }
        location.href = "/模块名/控制器名/方法名/p/" + page + '.html';
    });

以上就是实现百度分页样式的分页功能，我们只需要调节$fenye分页条数、 $qiehuan分页数字切换点，两个参数，即可实现每页显示分页的个数以及何时切换开始数字，很方便。

[20200917161122429.png_pic_center]: /images/20221123/de79c7cde39a41ec8695482d8e65c930.png
[20200917161142931.png_pic_center]: /images/20221123/9229e7cd56674db984f4fa929835f72f.png
[2020091716120186.png_pic_center]: /images/20221123/a35fbf85a467409296c07baa20ee0ddd.png
[PHP]: https://blog.csdn.net/qq_36129701/article/details/108644066