Django - 网页中的动态过滤器答案

【问题标题】：Django - Dynamic filters in a webpageDjango - 网页中的动态过滤器
【发布时间】：2020-12-05 23:30:35
【问题描述】：

我仍然是 python django 的学习者。我想动态过滤下表中的数据 table

我的html模板中的信息是：

<table>
        <thead>
            <tr>
                <th>N°Commande</th>
                <th>Magasin</th>
                <th>Objet</th>
                <th>Date commande</th>
                <th>Montant</th>
                <th>Etat</th>
            </tr>
        </thead>
        <tbody>
        {% for item in query_results %}
            <tr>
                <td>{{ item.numero_commande }}</td>
                <td>{{ item.enseigne}}</td>
                <td>{{ item.Objet}}</td>
                <td>{{ item.Date_commande}}</td>
                <td>{{ item.Montant}}</td>
                <td>{{ item.Etat}}</td>
            </tr>
        </tbody>

来自类：class Commande(models.Model)

这是我想要的示例（表格字段的过滤器）：

table with dynamic filters

提前感谢您的帮助

文卢普

【问题讨论】：

标签： django filter

【解决方案1】：

您可以采取一些方法来完成此操作，但作为初学者，我认为您应该看看django-filter 库。设置非常简单：

pip install django-filter
然后将“django_filters”添加到您的 INSTALLED_APPS。
INSTALLED_APPS = [
    ...
    'django_filters', 
] 

然后你创建一个过滤器集

import django_filters

class ProductFilter(django_filters.FilterSet):
    name = django_filters.CharFilter(lookup_expr='iexact')

    class Meta:
        model = Product
        fields = ['price', 'release_date']

在你看来，你想要这样的东西（对于基于函数的视图）

def product_list(request):
    f = ProductFilter(request.GET, queryset=Product.objects.all())
    return render(request, 'my_app/template.html', {'filter': f})

最后在你的模板中你想要这样的东西

...
    <form method="get">
        {{ filter.form.as_p }}
        <input type="submit" />
    </form>

    <tbody>
    {% for obj in filter.qs %}
        <tr>
        ... render your table rows here using {{ obj }}
        </tr>
    {% endfor %}
    </tbody>
...

您也可以尝试不同的设置，库中的文档为您提供了一些示例。

【讨论】：

【解决方案2】：

您可以在呈现此页面的视图函数中动态过滤上下文。因此，当您完成表单的字段时，它会向服务器发出 GET 请求，您需要过滤数据的参数在此请求中。然后，您只需要使用此参数过滤查询。这里有 Django 查询指南。 Making queries | Django

我建议您在view.py 文件中显示功能代码，以便我们了解您是如何过滤数据的。

【讨论】：

【解决方案3】：

您可以使用 JavaScript 和输入过滤表格。如果您使用的是引导程序： https://www.w3schools.com/bootstrap/bootstrap_filters.asp

带有 Bootstrap 的模板代码如下所示：

<input class="form-control" id="myInput" type="text" placeholder="Search..">
<table>
    <thead>
        <tr>
            <th>N°Commande</th>
            <th>Magasin</th>
            <th>Objet</th>
            <th>Date commande</th>
            <th>Montant</th>
            <th>Etat</th>
        </tr>
    </thead>
    <tbody id="myTable">
        {% for item in query_results %}
        <tr>
            <td>{{ item.numero_commande }}</td>
            <td>{{ item.enseigne}}</td>
            <td>{{ item.Objet}}</td>
            <td>{{ item.Date_commande}}</td>
            <td>{{ item.Montant}}</td>
            <td>{{ item.Etat}}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

【讨论】：