PHP realizes paging function (3) paging with ellipsis (the position of the ellipsis can be adjusted)

The following method is developed based on THINKPHP5 framework to realize the paging function with ellipsis, as shown below

This kind of paging is similar to the previous PHP implementation of paging function (2) Baidu paging style, the fixed number of paging is somewhat similar; this paging style also requires a fixed number of paging, as shown in the figure above, each fixed display of 6 pages ( Including the ellipsis), after clicking the current page, the current page will be delayed by a fixed number and the last number. If the number of pages is not fixed enough, the corresponding number can be extended.

Controller code

/*
 *分页功能
 * 参数：p 当前页码数
 *      listpage 每页显示的数据条数
 *      totalpage 总页数
 * 		fenye 分页个数
 * 		num 当前分页延后个数
 * */
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',6,'intval');//分页个数
	$guding=input('listpage',5,'intval');//固定个数，带表分离开的1..x，省略号，当前页;最小为3，代表省略号在第二位
	$num=input('listpage',1,'intval');//当前分页延后个数
    $num=$fenye-$guding>=$num?$num:$fenye-$guding;//3带表分离开的1，省略号，当前页
    //尾页
    $end=$p+$num>$totalpage?$totalpage:$p+$num;//当前页后面显示个页数
	$product=Db::name('shujubiao')->page($p,$listpage)->select();
	
	$this->assign('product',$product);
	$this->assign('p',$p);
	$this->assign('totalpage',$totalpage);
	$this->assign('fenye',$fenye);
	$this->assign('end',$end);
	$this->assign('guding',$guding);
	return $this->view->fetch('页面');
}

html code

<div class="page_box">
    <div class="p_b_c">

        <input type="hidden" id="page" value="{$p}">
        <input type="hidden" id="class_id" value="{$class_id}">
        <input type="hidden" id="totalpage" value="{$totalpage}">

        <div id="prev-page" class="pn_btn prev-page"></div>
        <ul>
            {for start="1" end="$guding-1"}
            <li onclick="page({$i},{$class_id})">{$i}</li>
            {/for}
            <li class="{$p<$fenye?'active1':''}">...</li>
            {if condition="$p<$fenye"}
            {for start="$guding-1" end="$fenye+1"}
            <li onclick="page({$i},{$class_id})">{$i}</li>
            {/for}
            {else /}
            {for start="$end-($fenye-$guding)" end="$end+1"}
            <li onclick="page({$i},{$class_id})">{$i}</li>
            {/for}
            {/if}

        </ul>

        <div id="next-page" class="pn_btn next-page"></div>
    </div>
</div>

js code

//分页
//当前页跳转
function page(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';
});

If you want to add the classification function, please refer to the first classification function article, PHP realizes the paging function (1) The previous page/next page
we only need to adjust the number of pagination items in $fenye, $num the number of postponements in the current page, $ The location of the ellipsis guding, three parameters, can realize the number of pages displayed on each page, the mantissa and the position of the ellipsis, which is very convenient.