PHP实现分页功能(二)百度分页样式,固定分页个数

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

下面的分类代码,还是根据我的上一篇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分页数字切换点,两个参数,即可实现每页显示分页的个数以及何时切换开始数字,很方便。

猜你喜欢

转载自blog.csdn.net/qq_36129701/article/details/108646277