django-filter button in template

问题

I'm using the django-filter package. My page displays all books. I have 5 genres. I want someone to be able to click a "scary" button, and have that filter my book list (user shouldn't have to also click "submit", just the genre button).

But right now when I click a genre button, it doesn't filter. Unless I use a checkbox widget in my filters.py (commented out), check the box, and then click the genre button, but this looks ugly.

Thanks in advance for the help!

Filters.py

class BookFilter(django_filters.FilterSet):
    genre = django_filters.ModelMultipleChoiceFilter(queryset=Genre.objects.all(),
#widget=CheckboxSelectMultiple)
    class Meta:
        model = Book
        fields = ['genre']

book_list.html

<form method="get">
  <ul>
    {% for genre in filter.form.genre %}
    <li>
      <button type="submit" class="button">
        {{ genre }}
      </button>
    </li>
    {% endfor %}
  </ul>
</form>

Update Thanks to GwynBleidD for the help! I also had to change {% for genre in filter.form.genre %} to {% for genre in genre_list %} where in my views, genre_list=Genre.objects.all(). Otherwise, the button value was value=option value=10 instead of value=10.

回答1:

You can add name and value to your button. That way button, when clicked, will also set property of specified name to specified value before submitting your form

<form method="get">
  <ul>
    {% for genre in filter.form.genre %}
    <li>
      <button type="submit" class="button" name="genre" value="{{ genre }}">
        {{ genre }}
      </button>
    </li>
    {% endfor %}
  </ul>
</form>

回答2:

I tried @GwynBleidD's method but ran into the same issue as @tei1. It seems as though the content of the filter.form is the generated html, so genre is the actual option html like the following:

<option value="">---------</option>

...which doesn't quite work with what the OP wanted, or what I was looking for as well.

I was able to get it to work by providing the data for my filtering values in the context along with the filter. I'm using class based views and looks something like this:

    def get_context_data(self, *args, **kwargs):
        context = super().get_context_data(**kwargs)
        context['genres'] = Genre.objects.all()
        context['filter'] = BookFilter(self.request.GET, queryset=Books.objects.all())
        return context

And the following template, assuming the value you want to display for the filter is available in a name attribute of the Genre model:

<form method="get">
  <ul>
    {% for genre in genres %}
    <li>
      <button type="submit" class="button" name="genre" value="{{ genre.id }}">
        {{ genre.name }}
      </button>
    </li>
    {% endfor %}
  </ul>
</form>

And if you want to have a "select all" button with no filter applied:

<form method="get">
  <ul>
    <li>
      <button type="submit" class="button" name="genre" value="" selected>
        All Genres
      </button>
    </li>
    {% for genre in genres %}
    <li>
      <button type="submit" class="button" name="genre" value="{{ genre.id }}">
        {{ genre.name }}
      </button>
    </li>
    {% endfor %}
  </ul>
</form>

来源：https://stackoverflow.com/questions/49349642/django-filter-button-in-template

标签

django

django-filter