Dynamic Pagination in Django Templates

Question

I am trying to achieve a style in css3 with dynamic pagination suing Django as backend. I don't know how to make it happen as I am not able to make it work with while adding form to get user preference. Also having hard time to work with css3 to exactly rebuild the form removing button group option to get pagination.

Following is what I need to achieve:

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)

Original Template HTML5 code:

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

What I am trying to do is:

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

Related css code is following:

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

There are two type of views on HTML5 side. First button is Grid and Second button is List from left. So if user selects Grid then all the columns in "show" area will be changed to grid of 12, 16, 32 and all. If selected List then accordingly list of 12, 16, 32 and all. Let me know about solution.

Answer 1

Its all event based, lets say you a default view as grid view and number of items to be displayed is 12, so when you change either of the two parameter shoot out a ajax request and get template rendered as per the new parameters and replace the existing part of page where you are showing items with new template.

For eg.

<div class=items"></div>

is where all the items are listed, so on change of every parameter you can just replace contents of items div with the a template rendered as per new parameters for pagination.

Feel free to ask questions, in case I might have misunderstood your problem or I am being unclear.

Edit:

In your Django views, I assume you know how to pagination module, there you can mention the number of products you want to see in a single page. So, for example lets say you need 16 products per page, so you use paginator accordingly. Following this you can simple use template based on user's selection and pass the list of products from you view to that template.

For reference, Django pagination