Django-网页中的动态过滤器

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

我的html模板中的信息包括：

N°命令
马加辛
Objet
日期命令
蒙坦特
埃塔特
{查询结果%中的项的百分比}
{{item.numero_commande}}
{{item.enseigne}}
{{item.Objet}
{{item.Date_commande}}
{{item.Montant}
{{item.Etat}

来自类：类命令（models.Model）

下面是我想要的示例（表字段上的过滤器）：

提前感谢您的帮助

---

Vinloup

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

---

我建议您在

view.py

文件中显示函数代码，以便我们了解您是如何过滤数据的。

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

---

我建议您在

view.py

文件中显示函数代码，以便我们了解您是如何过滤数据的。

您可以使用JavaScript和输入过滤表。如果您使用的是引导：

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

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

N°命令
马加辛
Objet
日期命令
蒙坦特
埃塔特
{查询结果%中的项的百分比}
{{item.numero_commande}}
{{item.enseigne}}
{{item.Objet}
{{item.Date_commande}}
{{item.Montant}
{{item.Etat}
{%endfor%}
$（文档）.ready（函数（）{
$（“#myInput”）。在（“keyup”，function（）上{
var value=$（this.val（）.toLowerCase（）；
$（“#myTable tr”）.filter（函数（）{
$（this）.toggle（$（this）.text（）.toLowerCase（）.indexOf（value）>-1）
});
});
});

您可以使用JavaScript和输入筛选表。如果您使用的是引导：

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

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

N°命令
马加辛
Objet
日期命令
蒙坦特
埃塔特
{查询结果%中的项的百分比}
{{item.numero_commande}}
{{item.enseigne}}
{{item.Objet}
{{item.Date_commande}}
{{item.Montant}
{{item.Etat}
{%endfor%}
$（文档）.ready（函数（）{
$（“#myInput”）。在（“keyup”，function（）上{
var value=$（this.val（）.toLowerCase（）；
$（“#myTable tr”）.filter（函数（）{
$（this）.toggle（$（this）.text（）.toLowerCase（）.indexOf（value）>-1）
});
});
});

要实现这一点，您可以采取几种方法，但作为初学者，我认为您应该看看这个库。设置非常简单：

然后将“django_过滤器”添加到已安装的_应用程序中

INSTALLED_APPS = [
    ...
    'django_filters', 
] 

然后创建一个过滤器集

在您的视图中，您需要这样的东西（对于基于函数的视图）

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

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

。。。
{{filter.form.as_p}
{filter.qs%中obj的%s}
... 使用{{obj}在此处呈现表行
{%endfor%}
...

---

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

有几种方法可以实现这一点，但作为初学者，我认为您应该看看库。设置非常简单：

然后将“django_过滤器”添加到已安装的_应用程序中

INSTALLED_APPS = [
    ...
    'django_filters', 
] 

然后创建一个过滤器集

在您的视图中，您需要这样的东西（对于基于函数的视图）

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

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

。。。
{{filter.form.as_p}
{filter.qs%中obj的%s}
... 使用{{obj}在此处呈现表行
{%endfor%}
...

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

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