Django 模板中的动态分页

Posted 2023-02-24

【中文标题】Django 模板中的动态分页

【英文标题】：Dynamic Pagination in Django Templates

【发布时间】：2016-09-21 11:45:25

【问题描述】：

我正在尝试使用 Django 作为后端的动态分页来实现 css3 中的样式。我不知道如何实现它，因为在添加表单以获得用户偏好时，我无法使其工作。也很难使用 css3 来完全重建表单删除按钮组选项以获得分页。

以下是我需要实现的目标：

Views.py：

class ProductListView(ListView):
    model = Product
    paginate_by = 12

    def get_paginate_by(self, queryset):
        return self.request.GET.get('paginate_by', self.paginate_by)

原始模板 html5 代码：

<div class="filter-show btn-group">
    <label data-translate="collections.toolbar.show">Show</label>
    <button class="btn btn-2 dropdown-toggle" data-toggle="dropdown">
      <i class="icon-exchange"></i>

      <span>12</span>

      <i class="icon-chevron-down"></i>
    </button>

    <ul class="dropdown-menu" role="menu">


      <li  class="active" ><a href="12">12</a></li>
      <li ><a href="16">16</a></li>
      <li ><a href="32">32</a></li>
      <li ><a href="all" data-translate="collections.toolbar.all">All</a></li>         
    </ul>
  </div>

我想做的是：

<div class="filter-show btn-group">

            <label>Show</label>
            <button class="btn btn-2 dropdown-toggle" >

              <i class="icon-exchange"></i>

              <span>12</span>

              <i class="icon-chevron-down"></i>
            </button>
            <form action="" method="get">
            <select class="dropdown-menu" role="menu" name="paginate_by">
              <option class="active" ><a href="12">12</a></option>
              <option><a href="16">16</a></option>
              <option><a href="32">32</a></option>
              <option><a href="all" data-translate="collections.toolbar.all">All</a></option>

            </select>
                </form>
          </div>

相关css代码如下：

<style>
                .toolbar .btn-group.filter-show  margin-left: 10px; 

                .toolbar button.dropdown-toggle 
                float: none;
                border: 1px solid #cbcbcb;
                color: #505050;
                background: #fff;
                line-height: 34px;
                padding: 0 50px 0 10px;
                position: relative;
                text-transform: capitalize;
                width: 170px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                
                .toolbar .filter-show button.dropdown-toggle 
                width: 120px;
                
                .btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) 
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                
                </style>

在 HTML5 端有两种类型的视图。第一个按钮是网格，第二个按钮是左侧的列表。因此，如果用户选择网格，则“显示”区域中的所有列都将更改为 12、16、32 等网格。如果选择列表，则相应地列出 12、16、32 和所有。 让我知道解决方案。

【参考方案1】：

它全部基于事件，假设您将默认视图作为网格视图并且要显示的项目数为 12，因此当您更改两个参数中的任何一个时，会发出 ajax 请求并根据新参数获取模板呈现并用新模板替换您正在显示项目的页面的现有部分。

例如。

<div class=items"></div>

是列出所有项目的地方，因此在更改每个参数时，您只需将项目 div 的内容替换为根据分页的新参数呈现的模板。

请随时提问，以防我误解了您的问题或我不清楚。

编辑：

在您的 Django 视图中，我假设您知道如何对模块进行分页，在那里您可以提及您希望在单个页面中看到的产品数量。因此，例如，假设您每页需要 16 个产品，因此您相应地使用分页器。在此之后，您可以根据用户的选择简单地使用模板，并将您查看的产品列表传递给该模板。

供参考，Django pagination

【讨论】：

虽然我不明白解决方案....但让我给你我试图处理它的方式。我需要设置两个 jquery 选择器，一个用于网格视图，一个用于列表。当用户看到列表时，默认情况下网格将处于活动状态。这两个模板理论上应该有网格代码，循环产品列表和产品网格。此外，我需要在列表和网格中包含 12 的模板，其中 paginate_by=12、16、32 或全部。我尝试实现它，但是当我使用包含参数设置模板时，它开始重复显示所有模板数据。

@ShaziaNusrat 我已经在编辑部分更新了答案，我已经提到了 django 分页。看，就您的 UI 而言，只有两个参数类型列表（网格、列表）和页面上的产品数量。您可以使用分页模块来固定产品数量，列表类型只是您将使用哪个模板的指示。

我或多或少地提出了相同的解决方案，并且在发布问题之前我实际上已经尝试过了。如果您在建议之前实施它会更好。 :-)

好吧，我已经安静地完成了一些这样的实现！ :D 如果你试过了，为什么你不能让它发生？你在哪里卡住了？