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