Django项目中大量页面如何组织分页?

2024-04-14

我有一个view.py产品列表:

...
from django.shortcuts import render, get_object_or_404
from .models import ProductCategory, Product, ProductDetail, ProductSpecialCategory
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
...
def product_list(request, category_slug=None, ):
category = None
categories = ProductCategory.objects.all()
object_list = Product.objects.filter(available=True, is_active=True)
if category_slug:
    category = get_object_or_404(ProductCategory, slug=category_slug)
    object_list = object_list.filter(category=category)
paginator = Paginator(object_list, 1)
page = request.GET.get('page')
try:
    products = paginator.page(page)
except PageNotAnInteger:
    products = paginator.page(1)
except EmptyPage:
    products = paginator.page(paginator.num_pages)
return render(request, 'shop/products/list_by_category/product_list.html', {'category': category,
                                                                            'categories': categories,
                                                                            'products': products,
                                                                            })

基于这个处理程序,我做了分页.html:

<nav aria-label="pagination" class="pagination_area">
<ul class="pagination">
    {% if page.has_previous %}
        <li class="page-item next">
            <a class="page-link" href="?page={{ page.previous_page_number }}">
                <i class="fa fa-angle-left" aria-hidden="true"></i>
            </a>
        </li>
    {% endif %}
    {% for i in page.paginator.page_range %}
        {% if page.number == i %}
            <li class="page-item focused"><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
            {% elif i > page.number|add:'-1' and i < page.number|add:'1' %}
            {% else %}
            <li class="page-item"><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
        {% endif %}
    {% endfor %}
    {% if page.has_next %}
        <li class="page-item next">
            <a class="page-link" href="?page={{ page.next_page_number }}">
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </a>
        </li>
    {% endif %}
</ul>
On the interface, I get the **result**:

我想以这样的方式组织:

只显示三页,第一页是上一页,第二页是当前页,第三页是下一页。例如,不包含在此范围内的内容会被省略号隐藏。:


我改变分页.html。请尝试这个。

<nav aria-label="pagination" class="pagination_area">
<div class="row">
  {% if page.end_index > 0 %}
  <div class="col-sm-12 col-md-5 d-none d-md-block">
    <p>Showing {{ page.start_index }} to {{ page.end_index }} of {{ page.paginator.count}}.</p>
  </div>
  {% endif %}
  {% if page.paginator.num_pages > 1 %}
  <div class="col-sm-12 col-md-7 dataTables_pager">
    <ul class="pagination">
      {% if page.has_previous %}

        <li class="page-item">
          <a class="page-link" data-page="1" href="?page={{ page.previous_page_number }}">
            <i class="fa fa-angle-double-left"></i>
          </a>
        </li>
        {% if page.previous_page_number > 1 %}
          <li class="page-item">
            <a class="page-link " data-page="{{page.previous_page_number}}"  href="?page={{ page.previous_page_number }}">
              <i class="fa fa-angle-left"></i>
            </a>
          </li>
        {% endif %}

      {% endif %}

      {% if page.previous_page_number > 2 %}
        <li class="page-item">
          <a class="page-link " data-page="{{page.number|add:'-2'}}" href="?{{page.number|add:'-2'}}"> {{ page.number|add:"-2" }} </a>
         </li>
        <li class="page-item">
          <a class="page-link " data-page="{{page.number|add:'-1'}}" href="?page={{page.number|add:'-1'}}"> {{ page.number|add:"-1" }} </a>
        </li>
      {% endif %}

      <li class="page-item active"><span class="page-link ">{{ page.number }}</span></li>

      {% if page.paginator.num_pages > page.number|add:"2" %}
        <li class="page-item">
          <a class="page-link " data-page="{{page.number|add:'1'}}" href="?page={{page.number|add:'1'}}"> {{ page.number|add:"1" }} </a>
        </li>
        <li class="page-item">
          <a class="page-link " data-page="{{page.number|add:'2'}}" href="?page={{page.number|add:'2'}}"> {{ page.number|add:"2" }} </a>
        </li>
      {% endif %}

      {% if page.has_next %}
        <li class="page-item">
          <a class="page-link " data-page="{{page.next_page_number}}" href="?page={{ page.next_page_number }}">
            <i class="fa fa-angle-right"></i>
          </a>
        </li>

        <li class="page-item">
          <a class="page-link " data-page="{{page.paginator.num_pages}}" href="?page={{page.paginator.num_pages}}">
            <i class="fa fa-angle-double-right"></i>
          </a>
        </li>
      {% endif %}
    </ul>
  </div>
  {% endif %}
</div>
</nav>

我的设计就是这样。如果您根据需要更改设计。 点击此处<<转到第一页,>>转到最后一页,<转到上一页并>转到下一页。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Django项目中大量页面如何组织分页? 的相关文章

  • 在具有不同边框的 div 上调用函数

    我有一个div对于一个名为 ball 的类 div 的每个边缘都有一个边框 顶部边框 左侧边框等 当用户单击每个边框上的边框时 我想用 JavaScript 触发不同的事件 例如 用户点击边框顶部console log top 等等 HMT
  • 如何计算单击的甜甜圈元素的中点与负 y 轴之间的角度

    Consider the following codesample donut chart using jquery flot http jsfiddle net c5zsg6y3 26 now as i have added the im
  • 垂直对齐多行文本(菜单元素)?

    我正在尝试垂直对齐 UL 内的文本 问题是某些列表项具有不止一行文本 因此无法使用行高 小提琴 http jsfiddle net jaAYT http jsfiddle net jaAYT 这是我想要达到的结果 http img402 i
  • 如何使用UpdateView?

    我有两个可能相关的 UpdateView 问题 首先 它不是更新用户而是创建一个新的用户对象 其次 我无法限制表单中显示的字段 这是我的观点 py class RegistrationView FormView form class Reg
  • 如何将变量传递给 django 中的所有模板? [复制]

    这个问题在这里已经有答案了 我正在尝试将变量 浏览器变量 传递给我的应用程序中的所有模板 关于如何让它发挥作用有什么建议吗 View def browser request primary cat list Categories objec
  • 从 Internet Explorer 打印时的默认文件名

    使用 pdf 打印机打印网页 将页面另存为 pdf 时 Chrome 和 Firefox 都使用该页面
  • 动态创建类 - Python

    我需要动态创建一个类 为了更详细地讲 我需要动态创建 Django 的子类Form class 通过 动态 我打算根据用户提供的配置创建一个类 e g 我想要一个名为CommentForm这应该子类化Form class 该类应该有一个选定
  • 使用 html 敏捷包解析 html

    我想从这个 div 中收集所有标签 但不知道如何使用 xpath 方法以最佳方式做到这一点 div class biz info h3 a href profil 78122 s C3 B8rby rehab S rby Rehab a h
  • Bootstrap 标签栏平滑移动导航按钮

    我有一个用于切换块的普通引导选项卡面板 在导航中切换块时 活动选项卡会突出显示 但现在 当我单击活动选项卡的背景时 它会立即发生变化 是否可以使切换选项卡时背景不会立即改变 而是根据需要哪个选项卡而平滑地左右移动 这可以用以下方法完成吗cs
  • HTML 和 标签有什么区别?

    HEAD 标签和 BODY 标签有什么区别 大多数 HTML 书籍仅 简短 提及 and 标签 但它们消失得很快 它们会影响浏览器呈现网页的方式吗 另外 它们会影响 javascript 的运行顺序吗 我的意思是 如果我里面有一个javas
  • Rails、REST 架构和 HTML 5:带有预检请求的跨域请求

    在致力于使我们的网站 HTML 5 友好的项目时 我们渴望采用跨域请求的新方法 不再通过隐藏的 iframe 发布 使用访问控制 http www w3 org TR access control 根据规范 我们开始设置一些测试来验证各种浏
  • 如何在单元测试中模拟 subprocess.call

    我使用的是 python 3 3 我必须测试一个使用的方法call来自 subprocess py I tried subprocess call MagicMock with patch subprocess call as TU cal
  • 更改QLineEdit的ClearButton图标

    我想在Windows 10 1909 64位 上的Python 3 8和PyQt5 5 15 0 上更改我的QLineEdit的ClearButton图标 稍后我想在Linux上运行代码 我尝试应用此处找到的代码 如何在 QLineEdit
  • django orm:select_lated,用假外键欺骗反向外键除了模型之外,会出现什么问题?

    我正在尝试学习如何使用 Django 的 ORM 进行更高级的查询 而不是使用原始 sql select related进行连接以减少数据库命中 原则上它可以进行我手动执行的连接 但有一个问题 它不使用反向外键关系来制作sql 对于我的架构
  • 如何根据另一个下拉列表中的选择动态填充下拉列表中的选项?

    我有一个表 其中包含类别信息 例如产品 我已将它们列在下拉菜单中 现在 我需要做的是 在下一个下拉菜单中列出所选类别的子类别 我希望 javascript 是必需的 但我对 javascript 还不太熟悉 将非常感谢您的帮助 你应该使用
  • 在 Chrome 中隐藏 HTML 时间输入字段上的图标

    在 Chrome 中 当您type time 属性到输入框 您会在输入旁边看到一个小图标时钟图标 有没有办法去掉这个小时钟图标 基于这个问题的答案 将日期输入三角形更改为日历图标 https stackoverflow com questi
  • 嵌套 DIV 的类似斑马的 CSS 样式

    我嵌套了 DIV 元素 但我不知道嵌套的级别 我需要每个都有与其父级不同的背景 创建类似斑马的颜色 我只使用两种背景 深色和白色 效果需要类似于在容器中设置奇数和偶数子级的样式 但在我的例子中 子级是嵌套的 我可以使用每个嵌套元素的规则来做
  • 在 Android Chrome 中隐藏 HTML5 音频/视频通知

    我的网络应用程序上有一个 HTML5 音频元素 在某些时候 我使用以下代码以编程方式停止播放 audioElement pause audioElement currentTime 0 播放音频时 我的 Android 设备 使用 Goog
  • Heroku 与 django 通道的正确 procfile/要求是什么?

    tl dr django 频道应用程序在本地使用 manage py runserver 运行 但不在 heroku 上运行 我是 django 通道的新手 尝试使用 heroku 通道部署一个非常基本的 django 应用程序 我最初使用
  • django jet 中的自定义徽标

    我目前正在尝试对 django 管理面板的皮肤进行一些定制 以使其更符合我们的品牌 目前我们使用 django jet 来美化管理面板 django jet 可以自定义 css html 吗 所有评论都说我应该更改一些 html 文件 但我

随机推荐