Django 模板中的动态分页

Question

我正在尝试使用 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 和所有。 让我知道解决方案。

Answer 1

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

例如。

<div class=items"></div>

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

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

编辑：

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

供参考，Django pagination