当前位置：首页 > JavaScript

前端实现分页除了js

2026-03-01 19:06:11JavaScript

纯CSS实现分页

利用CSS的target伪类选择器可以实现简单的分页效果。通过锚点链接和:target样式切换显示不同内容。示例结构如下：

<div class="pagination-container">
  <a href="#page1">1</a>
  <a href="#page2">2</a>
  <a href="#page3">3</a>

  <div id="page1" class="page">第一页内容</div>
  <div id="page2" class="page">第二页内容</div>
  <div id="page3" class="page">第三页内容</div>
</div>

<style>
.page {
  display: none;
}
.page:target {
  display: block;
}
</style>

表单提交分页

通过表单提交和服务器端处理实现分页。使用隐藏字段记录当前页码，每次提交表单时更新页码参数：

<form method="get" action="/data">
  <input type="hidden" name="page" value="1">
  <button type="submit" name="direction" value="prev">上一页</button>
  <button type="submit" name="direction" value="next">下一页</button>
</form>

服务器端根据page参数返回对应数据，前端直接渲染新页面。

前端实现分页除了js

锚点分页跳转

利用URL的hash部分实现页面内跳转，结合CSS控制显示区域。适合内容量不大的场景：

<a href="#section1">第1节</a>
<a href="#section2">第2节</a>

<div id="section1">...</div>
<div id="section2">...</div>

<style>
div[id^="section"] {
  height: 100vh;
  scroll-margin-top: 50px;
}
</style>

服务器端渲染分页

传统Web开发中常用的方式，由后端模板引擎直接生成分页HTML。以PHP为例：

前端实现分页除了js

<?php
$page = $_GET['page'] ?? 1;
$totalPages = 10;
?>

<ul class="pagination">
  <?php for($i=1; $i<=$totalPages; $i++): ?>
    <li><a href="?page=<?= $i ?>"><?= $i ?></a></li>
  <?php endfor; ?>
</ul>

伪分页技术

通过CSS的overflow和height属性实现视觉分页效果，所有内容实际存在于同一页面：

<div class="pseudo-pager">
  <div class="page" style="height: 300px; overflow: auto;">
    第一页内容...
  </div>
  <div class="page" style="height: 300px; overflow: auto;">
    第二页内容...
  </div>
</div>

链接参数分页

通过普通超链接传递分页参数，每次点击链接都会重新加载页面：

<a href="/items?page=1">1</a>
<a href="/items?page=2">2</a>

动态加载结合CSS

利用<link rel="prefetch">预加载资源，通过CSS切换显示：

<link rel="prefetch" href="page2.html" as="document">

<div class="page-container">
  <iframe src="page1.html" class="active-page"></iframe>
  <iframe src="page2.html"></iframe>
</div>

<style>
iframe {
  display: none;
}
iframe.active-page {
  display: block;
}
</style>