Django实现固定数量页码的分页显示方案

何川

发布时间：2026-10-13 | 5人浏览过

原创

本文介绍在Django项目中解决分页列表过长导致页面冗杂的问题。通过后端计算当前页前后固定数量的页码，并动态生成HTML链接，实现前端仅展示规定数量的页码。结合Bootstrap样式，优化用户浏览体验，提供完整的views.py逻辑与book_list.html模板代码示例。

Django固定页码显示的实现背景

当数据分页产生的总页数过多时，若将所有页码直接罗列在页面上，会导致界面显得杂乱且难以阅读。

为了解决这一问题，可以在页面中限制并仅显示规定数量的页码，从而保持界面的整洁与清晰。

具体的实现逻辑与效果如下所示：

前端模板文件 book_list.html 的代码结构如下：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>书籍列表</title>
  <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css" rel="external nofollow" >
</head>
<body>
 
<div class="container">
 
  <table class="table table-bordered">
    <thead>
    <tr>
      <th>序号</th>
      <th>id</th>
      <th>书名</th>
    </tr>
    </thead>
    <tbody>
    {% for book in books %}
      <tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ book.id }}</td>
        <td>{{ book.title }}</td>
      </tr>
    {% endfor %}
 
    </tbody>
  </table> 
  <nav aria-label="Page navigation">
    <ul class="pagination">
      <li>
        <a href="#" rel="external nofollow" rel="external nofollow" aria-label="Previous">
          <span aria-hidden="true">«</span>
        </a>
      </li>
      <li>
        {{ page_html|safe }}
      </li>
      <li>
        <a href="#" rel="external nofollow" rel="external nofollow" aria-label="Next">
          <span aria-hidden="true">»</span>
        </a>
      </li>
    </ul>
  </nav> 
</div> 
</body>
</html>

核心代码实现细节

后端视图文件 views.py 的处理逻辑如下：


from django.shortcuts import render
from app01 import models 
def book_list(request):
  # 从 URL 中取参数
  page_num = request.GET.get("page")
  print(page_num, type(page_num))
  page_num = int(page_num)
 
  # 定义两个变量保存数据从哪儿取到哪儿
  data_start = (page_num-1)*10
  data_end = page_num*10
 
  # 书籍总数
  total_count = models.Book.objects.all().count()
 
  # 每一页显示多少条数据
  per_page = 10
 
  # 总共需要多少页码来显示
  total_page, m = divmod(total_count, per_page)
 
  # 页面上最多展示的页码
  max_page = 11
  half_max_page = max_page // 2
 
  # 页面上展示的页码的开始页
  page_start = page_num - half_max_page
  # 页面上展示的页码的结束页
  page_end = page_num + half_max_page
 
  # 如果当前页减一半比 1 小
  if page_start <= 1:
    page_start = 1
    page_end = max_page
  # 如果当前页加一半比总页码还大
  if page_end > total_page:
    page_end = total_page
    page_start = total_page - max_page + 1
 
  # 如果还有数据
  if m:
    total_page += 1
 
  all_book = models.Book.objects.all()[data_start:data_end]
 
  # 拼接 html 的分页代码
  html_list = []
  for i in range(page_start, page_end+1):
    tmp = '<li><a href="/book_list/?page={0}" rel="external nofollow" >{0}</a></li>'.format(i)
    html_list.append(tmp)
 
  page_html = "".join(html_list)
 
  return render(request, "book_list.html", {"books": all_book, "page_html": page_html})

实际运行后的页面效果如下图所示：