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分页