时间戳

首页 > 解决方案 > 如何过滤、搜索和排序 Django 前端记录？

javascript - 如何过滤、搜索和排序 Django 前端记录？

问题描述

我创建了一个包含大约 2000 条记录的数据库。我想允许用户执行搜索、过滤或排序。

这样我就编写了views.py：

from django.views.generic.list import ListView
from .models import Journal

class JournalsView(ListView):
model = Journal
paginate_by = 50

def get_context_data(self, **kwargs):
    context = super().get_context_data(**kwargs)
    return context

这是模板文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title>Journals' List</title>

    <!-- Bootstrap CSS & JS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>

<body class="bg-light">
    <div class="container">
    <!-- Header -->
        <div class="py-5 text-center">
            <h2>Journal Finder</h2>
            <p class="lead">
                Journals list at glance. Search by name, sort by IF and ministerial points or filter for domains. <br> It is so simple!
            </p>
        </div>

        <div class="row">
        <input class="form-control mb-4" id="tableSearch" type="text" placeholder="Type something to search list items">
            <table class="table" id="journalsTable">
                <thead>
                    <tr>
                        <th scope="col"> Title</th>
                        <th scope="col"> IF</th>
                        <th scope="col"> Ministerial Points</th>
                        <th scope="col"> Domains</th>
                    </tr>
                </thead>
                <tbody id="myTable">
                    {% for journal in object_list %}
                    <tr>
                        <td>{{ journal.title }}</td>
                        <td>{{ journal.impact_factor }}</td>
                        <td>{{ journal.ministerial_points }}</td>
                        <td>
                            {% for domain in journal.domain.all %}
                                {% if not forloop.last %}
                                    {{ domain.domain_name }},
                                {%  else %}
                                    {{ domain.domain_name }}
                                {% endif %}
                            {%  endfor %}
                        </td>
                    </tr>
                {% empty %}
                    <li>No journals yet.</li>
                {% endfor %}
                </tbody>
            </table>
        </div>

    </div>

    <!-- Additional JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

    <!-- My JS -->
    {% load static %}
    <script src="{% static 'main.js' %}"></script>

</body>

最重要的是如何创建搜索所有项目的搜索框，而不仅仅是引擎呈现的这些项目？

标签： javascripthtmljquerycssdjango

解决方案

您可以为此使用Django Q。

from django.views.generic import ListView
from django.db.models import Q
from .models import Journal

class JournalsView(ListView):
    model = Journal
    paginate_by = 50

    def get_queryset(self):
       Journal = Journal.objects.all()
       query = self.request.GET.get("q")
       if query:
          Journal = Journal.objects.filter(
            Q(title__icontains=query) |
            Q(impact_factor__icontains=query)
          )
       return Journal

和形式：

<form>
   <input name="q" type="search" value="{{ request.GET.q }}">
</form>

有了这个，您可以根据标题和影响因子搜索 Journal 模型中的所有项目

推荐阅读