Question

我正在尝试使用动态分页来实现css3中的样式，将Django作为后端。我不知道如何实现它，因为我无法在添加表单以获得用户偏好时使用它。还有很难使用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方面有两种类型的观点。第一个按钮是Grid，第二个按钮是左边的List。因此，如果用户选择Grid，则“show”区域中的所有列将更改为12,16,32和all的网格。如果选择列表，则相应地列出12,16,32和所有。让我知道解决方案。

Answer 1

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

例如。

<div class=items"></div>

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

如果我可能误解了您的问题或者我不清楚，请随意提问。

修改

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

供参考，Django pagination

Django模板中的动态分页

1 个答案: