php

// $totalItems：总项目数。
// $perPage：每页显示的项目数。
// $currentPage：当前页码，从 URL 参数中获取，默认值为 1。
// $baseUrl：分页链接的基础 URL。
function generatePagination($totalItems, $perPage,$currentPage,$baseUrl) {
	// 计算总页数
	$totalPages = ceil($totalItems / $perPage);
	if ($totalPages <= 1) return '';
	
	// 获取当前页码（假设通过&page=参数传递）
	$currentPage = isset($_GET['page']) ? max(1, min((int)$_GET['page'], $totalPages)) : 1;
	
	// 初始化分页HTML
	$pagination = '<div class="pagination"><ul>';
	
	// 上一页按钮
	if ($currentPage > 1) {
		$pagination .= '<li><a href="' . $baseUrl . '&page=' . ($currentPage - 1) . '">&laquo;</a></li>';
	} else {
		$pagination .= '<li class="disabled"><span>&laquo;</span></li>';
	}
	
	// 计算页码范围（确保最多显示7个页码）
	$startPage = max(1, $currentPage - 3);
	$endPage = min($totalPages, $currentPage + 3);
	
	// 如果当前页靠近开头，调整结束页码
	if ($currentPage <= 4) {
		$endPage = min(7, $totalPages);
	}
	
	// 如果当前页靠近末尾，调整开始页码
	if ($currentPage >= $totalPages - 3) {
		$startPage = max(1, $totalPages - 6);
	}
	
	// 显示第一页和省略号（如果需要）
	if ($startPage > 1) {
		$pagination .= '<li><a href="' . $baseUrl . '&page=1">1</a></li>';
		if ($startPage > 2) {
			$pagination .= '<li class="disabled"><span>...</span></li>';
		}
	}
	
	// 显示页码
	for ($i = $startPage; $i <= $endPage; $i++) {
		if ($i == $currentPage) {
			$pagination .= '<li class="active"><span>' . $i . '</span></li>';
		} else {
			$pagination .= '<li><a href="' . $baseUrl . '&page=' . $i . '">' . $i . '</a></li>';
		}
	}
	
	// 显示最后一页和省略号（如果需要）
	if ($endPage < $totalPages) {
		if ($endPage < $totalPages - 1) {
			$pagination .= '<li class="disabled"><span>...</span></li>';
		}
		$pagination .= '<li><a href="' . $baseUrl . '&page=' . $totalPages . '">' . $totalPages . '</a></li>';
	}
	
	// 下一页按钮
	if ($currentPage < $totalPages) {
		$pagination .= '<li><a href="' . $baseUrl . '&page=' . ($currentPage + 1) . '">&raquo;</a></li>';
	} else {
		$pagination .= '<li class="disabled"><span>&raquo;</span></li>';
	}
	
	$pagination .= '</ul></div>';
	
	return $pagination;
}

css

/* 分页样式 */
.pagination ul {
    display: inline-block;
    padding: 0;
    margin: 20px 0;
}
.pagination li {
    display: inline;
    margin: 0 2px;
}
.pagination li a, .pagination li span {
    padding: 6px 12px;
    border: 1px solid #dcdfe6;
    text-decoration: none;
    color: #606266;
    border-radius: 3px;
    background-color: #fff;
}
.pagination li a:hover, .pagination li span:hover{
    color:#409eff;
    background-color: #ecf5ff;
    border:1px solid #a0cfff;
}
.pagination li.active span {
    background-color: #409eff;
    color: white;
    border-color: #409eff;
}
.pagination li.disabled span {
    color: #606266;
    cursor: not-allowed;
    opacity: 0.5;
    background-color: #eee !important;
}
.pagination li.disabled span:hover{
    border: 1px solid #dcdfe6;
    color: #606266;
}