网页分页的代码大全，含html+css+js+php+python+java等多种代码

2023-01-19 03:31:04

网页分页：从入门到精通

前言

在数字世界的汪洋大海中，分页早已成为网页设计的必备功能。它宛如一座桥梁，将庞杂的信息串联成一个个可消化的小单元，为用户提供轻松畅游的数据海洋的便捷通道。本篇文章将带领你踏上一段探索网页分页的奇幻之旅，从HTML的构建基石到JavaScript的交互魔法，从PHP的动态生成到Python和Java的编程世界，为你揭开分页背后的奥秘。

HTML：分页的骨架

网页分页的基础在于HTML代码，它勾勒出分页的结构和内容。以下是一段常见的HTML分页代码：

<div class="pagination">
  <ul>
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</div>

这段代码定义了一个简单的分页结构，包括：

用于放置分页链接的<ul>元素
用于放置上一页和下一页链接的<li>元素
包裹整个分页结构的<div>元素，并添加了样式类名"pagination"

CSS：分页的外衣

CSS代码赋予分页以视觉上的魅力，定义其外观和样式。以下是一段CSS分页代码：

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination ul {
  display: flex;
  list-style: none;
}

.pagination li {
  margin: 0 5px;
}

.pagination a {
  padding: 5px 10px;
  border: 1px solid #ccc;
  text-decoration: none;
}

.pagination a:hover {
  background-color: #ccc;
}

.pagination .active {
  background-color: #000;
  color: #fff;
}

这段代码为分页设定了以下样式：

分页整体居中对齐，水平排列
分页链接没有列表符号
每个分页链接都有5px的左右间距
分页链接有5px的内边距和10px的外边距，边框为1px实线，默认文字颜色为黑色，背景色为白色
悬停在分页链接上时，其背景色会变为浅灰色
当前页面所在的分页链接，背景色变为黑色，文字颜色变为白色

JavaScript：分页的互动

JavaScript代码为分页注入了交互性，让用户可以轻松切换页面。以下是一段JavaScript分页代码：

var pagination = document.querySelector('.pagination');
var pages = document.querySelectorAll('.pagination li');
var currentPage = 1;

pages.forEach(function(page) {
  page.addEventListener('click', function() {
    currentPage = parseInt(page.textContent);
    updatePagination();
  });
});

function updatePagination() {
  pages.forEach(function(page) {
    page.classList.remove('active');
  });

  pages[currentPage - 1].classList.add('active');
}

这段代码实现了以下功能：

获取分页元素和分页链接元素
为每个分页链接添加点击事件监听器
当用户点击某个分页链接时，更新currentPage变量，并调用updatePagination()函数
updatePagination()函数将所有分页链接的"active"样式移除，并为当前页面所在的分页链接添加"active"样式

PHP：动态生成分页

PHP代码可以动态生成分页链接，适应不同的数据量和页面需求。以下是一段PHP分页代码：

<?php
$currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$totalPages = 10;

$pagination = '<ul class="pagination">';
for ($i = 1; $i <= $totalPages; $i++) {
  $pagination .= '<li><a href="?page=' . $i . '">' . $i . '</a></li>';
}
$pagination .= '</ul>';

echo $pagination;
?>

这段代码动态生成了分页链接，其原理如下：

获取当前页码，默认为1
设定总页数为10
使用<ul>和<li>元素生成分页链接
将分页链接输出到页面上

Python：分页的灵活性

Python代码也可以动态生成分页链接，并提供更灵活的定制选项。以下是一段Python分页代码：

from flask import Flask, request

app = Flask(__name__)

@app.route('/')
def index():
  currentPage = request.args.get('page', 1, type=int)
  totalPages = 10

  pagination = '<ul class="pagination">'
  for i in range(1, totalPages + 1):
    pagination += '<li><a href="?page=' + str(i) + '">' + str(i) + '</a></li>'
  pagination += '</ul>'

  return pagination

if __name__ == '__main__':
  app.run()

这段代码与PHP代码类似，但使用了Flask框架动态生成了分页链接：

获取当前页码，默认为1
设定总页数为10
使用<ul>和<li>元素生成分页链接
将分页链接输出到页面上

Java：分页的编程艺术

Java代码也能实现分页功能，并提供更强大的编程能力。以下是一段Java分页代码：

import java.util.List;

public class Pagination {

  private int currentPage;
  private int totalPages;
  private List<Integer> pageNumbers;

  public Pagination(int currentPage, int totalPages) {
    this.currentPage = currentPage;
    this.totalPages = totalPages;
    this.pageNumbers = new ArrayList<>();

    int start = Math.max(1, currentPage - 5);
    int end = Math.min(totalPages, currentPage + 5);

    for (int i = start; i <= end; i++) {
      pageNumbers.add(i);
    }
  }

  public String getPaginationString() {
    StringBuilder sb = new StringBuilder();
    sb.append("<ul class=\"pagination\">");

    if (currentPage > 1) {
      sb.append("<li><a href=\"?page=" + (currentPage - 1) + "\">&laquo;</a></li>");
    }

    for (int pageNumber : pageNumbers) {
      if (pageNumber == currentPage) {
        sb.append("<li class=\"active\"><a href=\"?page=" + pageNumber + "\">" + pageNumber + "</a></li>");
      } else {
        sb.append("<li><a href=\"?page=" + pageNumber + "\">" + pageNumber + "</a></li>");
      }
    }

    if (currentPage < totalPages) {
      sb.append("<li><a href=\"?page=" + (currentPage + 1) + "\">&raquo;</a></li>");
    }

    sb.append("</ul>");

    return sb.toString();
  }
}