使用 Django 构建可过滤表的最佳方法

Question

我创建了一个模板，其中有一个 HTML 表和一个用于渲染用户之前上传的 pdf 的 iframe：

目标是用户可以将表格条目与一个 pdf/多个 pdf 进行匹配。 这部分已经完成了。

但现在我想知道过滤表数据的最佳方法是什么。 我这样创建了表格：

{% extends "website/base.html" %}
{% block content %}
{% load static %}
{% load evidence_extras %}
<script src="{% static 'evidence/matching_final.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'evidence/css/style.css' %}">
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.8/axios.js'></script>

<div class="container">
    {% csrf_token %}
    <div class="row">
        <div class="col-8">
            <div class="row">
                <div class="col-12">
                    <table class="table">
                        <thead class="table-dark">
                            <td>
                                id
                            </td>
                            .......
                        </thead>
                        <tbody>
                            {% for piece in transactions %}
                            <tr onclick="handleRowClick(this, {{piece.id}})">
                                <td>
                                    {{ piece.id }}
                                </td>
                                ......
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <button onclick="handleMatch(this)" class="btn btn-primary" style="width: 100%;">Match</button>
                </div>
            </div>
        </div>
        <div class="col-4 overflow-scroll" style="height: 60em;">
            {% for evidence in evidences %}
            <div class="row">
                <div class="col-12">
                    <div class="card" id="evidence_{{evidence.id}}">
                        <div class="card-header">{{ evidence.name}}</div>
                        <div class="card-body">
                            <iframe src="/evidence/pdf/{{evidence.id}}" id="pdf_frame" width="100%"
                                height="400"></iframe>
                            <ul>
                                <li maxlength="20"> file: {{evidence.file}} </li>
                                <li maxlength="20"> hash: {{evidence.hash}} </li>
                            </ul>
                            <div class="row">
                                <div class="col-6">
                                    <button onclick="handleMarkClick(this, {{evidence.id}})" class="btn btn-primary"
                                        style="width: 100%;">mark</button>
                                </div>
                                <div class="col-6">
                                    <button onclick="handleExpandClick(this,{{evidence.id}})" class="btn btn-primary"
                                        style="width: 100%;">show</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            {% endfor %}
        </div>
    </div>


</div>
{% endblock %}

如果我完全使用 JavaScript 构建表格，过滤不会成为问题，但我认为这不是 Django 的正确方法？
过滤器可以直接应用于前端的上下文数据吗？也许可以使用 JavaScript？
我不想每次有人在过滤器字段中输入内容时都重新加载数据，因为我已经加载了所需的数据并且希望避免不必要的数据库查询。 有人能给我指出正确的方向吗？
谢谢！

编辑：
我忘了提及，我不喜欢使用预构建的 Django 库，因为我仍在学习，并且需要大量自定义。

编辑2： 最小可重现示例 -> stack.html:

{% extends "website/base.html" %}
{% block content %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'evidence/css/style.css' %}">
<div class="container">
    {% csrf_token %}
    <div class="row">
        <div class="col-8">
            <div class="row">
                <div class="col-12">
                    <table class="table">
                        <thead class="table-dark">
                            <tr>
                                <td>
                                    mame
                                </td>
                                <td>
                                    hash
                                </td>
                                <td>
                                    something
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in stack %}
                            <tr>
                                <td>
                                    {{ row.name }}
                                </td>
                                <td>
                                    {{ row.hash }}
                                </td>
                                <td>
                                    {{ row.something }}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

查看：

def stack(request):
    context = Stack.objects.all()
    return render(request, "evidence/stack.html", {"stack": context})

网址：

app_name = "evidence"
urlpatterns = [
 ...,
    path('stact', stack, name='stack'),
]

型号：

class Stack(models.Model):
    name = models.CharField(max_length=150)
    hash = models.CharField(max_length=150)
    something = models.CharField(max_length=150)

Answer 1

你可以只通过JS进行过滤，但是如果你包含分页，那么你就必须通过后端数据库查询来进行过滤。正确的做法是通过后端进行适当的过滤和分页。您只需添加一个按钮即可过滤掉内容，而不是立即输入内容进行过滤。