How to Sort a Django ListView on Button Click

Question

I'm making a website which has a bunch of Event posts (Parties, Get-Togethers, Fundraisers etc.).

I want the user to be able to sort the posts by the date those event posts were created (created_date) and by the date that event post takes place (start_date) on button click.

There are exactly 2 ways the user can sort the ListView (by created_date or by start_date according to my models.py) so I want the button to be a toggle, where clicking it once would filter by start_date and clicking the button once more (after the page refreshes) would filter by created_date.

My home.html contains the button and a for loop to show the posts:

<!-- THE EVENT FEED -->
<div class="feed">
  <h2>Event Feed</h2>
  <!--BUTTON TO FILTER EVENT FEED-->
  <div style = "border-top: solid 1px #eee; width:100%;align-items: center;display: flex;flex-direction: column;">

   <a href="{% url 'whsapp-home' %}?ordering={% if ordering == 'created_date' %}-start_date{% else %}-created_date{% endif %}"><button>Filter by Event Date</button></a>
   <!--<button data-text-swap="Filter by Event Date"></button>-->
  </div>

  <div class="chat">
    {% for post in posts %}
    <div class="your messages">
      <div class="message">
        <b>{{ post.title}}</b>
      </div>
    </div>
    {% endfor %}
    </div>
  </div>

And here is my class based view for the posts:

class PostListView(ListView):
    model = Post
    template_name = 'whsapp/home.html' # FOLLOW THIS NAMING SCHEME <app>/<model>_<viewtype>.html
    context_object_name = 'posts'
    def get_ordering(self):
        ordering = self.request.GET.get('ordering','created_date') #Order live feed events according to closest start date events at the top
        return ordering

Does anyone know how I could go about implementing this?

Possible duplicate of [How do I call a Django function on button click?](https://stackoverflow.com/questions/15341285/how-do-i-call-a-django-function-on-button-click) — George Udosen, Nov 16 '19 at 07:34
I saw that question before posting this. That question doesn't really apply here because I don't mind if the website refreshes or not so I don't need the dynamic JS or JQuery based solutions on that page. Furthermore, they are using the pk to filter the objects whereas I am trying to use the ListView's built in parameters — ruckarucka, Nov 16 '19 at 07:48
you can use two views and urls with same template, if you dont want to use js — bmons, Nov 16 '19 at 08:04

score 0 · Answer 1 · answered Nov 17 '19 at 02:14

So I fiddled with the if statement some more and by making a 3 way conditional I was able to create the toggleable button

home.html:

<a href="{% if request.get_full_path == '/' %}?ordering=-start_date{% elif request.get_full_path == '/?ordering=-start_date' %}/?ordering=-created_date{% elif request.get_full_path == '/?ordering=-created_date' %}/?ordering=-start_date{% endif %}"><button>Event Date</button></a>

views.py

class PostListView(ListView):
model = Post
template_name = 'whsapp/home.html' # FOLLOW THIS NAMING SCHEME <app>/<model>_<viewtype>.html
context_object_name = 'posts'
ordering = ['-created_date']
def get_ordering(self):
  ordering = self.request.GET.get('ordering','-created_date') #Order live feed events according to closest start date events at the top
  return ordering

How to Sort a Django ListView on Button Click

1 Answers1