PHP realiza la función de paginación (3) paginación con puntos suspensivos (la posición de los puntos suspensivos se puede ajustar)

El siguiente método se desarrolla en base al marco THINKPHP5 para realizar la función de paginación con puntos suspensivos, como se muestra a continuación

Este tipo de paginación es similar a la implementación PHP anterior de la función de paginación (2) Estilo de paginación de Baidu, el número fijo de paginación es algo similar; este estilo de paginación también requiere un número fijo de paginación, como se muestra en la figura anterior, cada pantalla fija de 6 páginas ( Incluyendo los puntos suspensivos), después de hacer clic en la página actual, la página actual se retrasará en un número fijo y el último número.Si el número de páginas no es lo suficientemente fijo, se puede ampliar el número correspondiente.

Código del controlador

/*
 *分页功能
 * 参数：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('页面');
}

código HTML

<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>

código js

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

Si desea agregar la función de clasificación, consulte el primer artículo de la función de clasificación, PHP realiza la función de paginación (1) La página anterior / página siguiente
solo necesitamos ajustar el número de elementos de paginación en $ fenye, $ num el número de aplazamientos en la página actual, $ La ubicación de la elipsis guding, tres parámetros, permite realizar el número de páginas mostradas en cada página, la mantisa y la posición de la elipsis, lo cual es muy conveniente.