需要用ajax调用实现django-filter

Posted 2023-02-19

【中文标题】需要用ajax调用实现django-filter

【英文标题】：Need to implement django-filter with ajax call

【发布时间】：2019-08-30 08:31:45

【问题描述】：

我使用django-filter==2.1.0 作为我的搜索过滤器。现在我需要在我的搜索过滤器中添加 ajax 调用。我的代码如下：

views.py

def test_view(request):
    book_list = Book.objects.all()
    book_filter = BookFilter(request.GET, queryset=book_list)
    return render(request, 'test.html', 'filter': book_filter)

test.html

% extends 'base.html' %
% load widget_tweaks %

% block content %

    <form method="get">
        filter.form.as_p 
       <button type="submit">Search</button>
    </form>

    <ul>
        % for book in filter.qs %
            <li> book.name </li>
        % endfor %
    </ul>

% endblock %

filters.py

class BookFilter(django_filters.FilterSet):

    publication = django_filters.ModelMultipleChoiceFilter(queryset=Publication.objects.all(), widget=forms.CheckboxSelectMultiple)

    authors = django_filters.ModelMultipleChoiceFilter(queryset=Author.objects.all(), widget=forms.CheckboxSelectMultiple)

    categories = django_filters.ModelMultipleChoiceFilter(queryset=Category.objects.all(), widget=forms.CheckboxSelectMultiple)

    class Meta:
        model = Book
        fields = ['publication', 'authors', 'categories', ]

models.py

class Book(models.Model):
    name = models.CharField(max_length=100)
    publication = models.ForeignKey(Publication, on_delete=models.CASCADE)
    authors = models.ManyToManyField(Author, through='AuthorBook')
    categories = models.ManyToManyField(Category, through='BookCategory')

在 ajax 中需要 url 值。 django-filter 自动工作。所以，我不明白如何用 django_filter 实现 ajax 调用。提前致谢。

【问题讨论】：

检查这个link 这里你可以看到在Django中实现ajax调用的方式。

你找到解决办法了吗？

【参考方案1】：

将django-crispy-forms 添加到您的requeirements.txt 用法示例：

views.py

filter = YourFilterClass(request.GET, queryset=Model.objects.all())
return render(request,'template/index.html', filter:filter)

html

<form method="get">
        <div class="form-group">
            <label class="col-md-4 control-label">Şehir :</label>
            <div class="col-md-8">
                <div class="col-md-12 col-xs-12">
                    % render_field filter.form.customer__city class="form-control select" data-live-search="true" data-size="15" %
                </div>
            </div>
        </div>
    </form>

在您可以使用 ajax 提交表单之后，它将返回过滤后的对象