title: How to filter, search and sort Django front-end records?
body: <p>I have created a database that consists of about 2000 records. I'd like to allow user to perform searching, filtering or sorting it.</p>
  <p>That way I coded <strong>views.py</strong>:</p>
  <pre><code>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
  </code></pre>
  <p>And this is the template file:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;!-- Meta tags --&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;/&gt;
      &lt;title&gt;Journals' List&lt;/title&gt;
  
      &lt;!-- Bootstrap CSS &amp; JS --&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css&quot; integrity=&quot;sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO&quot; crossorigin=&quot;anonymous&quot;&gt;
      &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js&quot; integrity=&quot;sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body class=&quot;bg-light&quot;&gt;
      &lt;div class=&quot;container&quot;&gt;
      &lt;!-- Header --&gt;
          &lt;div class=&quot;py-5 text-center&quot;&gt;
              &lt;h2&gt;Journal Finder&lt;/h2&gt;
              &lt;p class=&quot;lead&quot;&gt;
                  Journals list at glance. Search by name, sort by IF and ministerial points or filter for domains. &lt;br&gt; It is so simple!
              &lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;row&quot;&gt;
          &lt;input class=&quot;form-control mb-4&quot; id=&quot;tableSearch&quot; type=&quot;text&quot; placeholder=&quot;Type something to search list items&quot;&gt;
              &lt;table class=&quot;table&quot; id=&quot;journalsTable&quot;&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th scope=&quot;col&quot;&gt; Title&lt;/th&gt;
                          &lt;th scope=&quot;col&quot;&gt; IF&lt;/th&gt;
                          &lt;th scope=&quot;col&quot;&gt; Ministerial Points&lt;/th&gt;
                          &lt;th scope=&quot;col&quot;&gt; Domains&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody id=&quot;myTable&quot;&gt;
                      {% for journal in object_list %}
                      &lt;tr&gt;
                          &lt;td&gt;{{ journal.title }}&lt;/td&gt;
                          &lt;td&gt;{{ journal.impact_factor }}&lt;/td&gt;
                          &lt;td&gt;{{ journal.ministerial_points }}&lt;/td&gt;
                          &lt;td&gt;
                              {% for domain in journal.domain.all %}
                                  {% if not forloop.last %}
                                      {{ domain.domain_name }},
                                  {%  else %}
                                      {{ domain.domain_name }}
                                  {% endif %}
                              {%  endfor %}
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  {% empty %}
                      &lt;li&gt;No journals yet.&lt;/li&gt;
                  {% endfor %}
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;!-- Additional JS --&gt;
      &lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.min.js&quot; integrity=&quot;sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js&quot; integrity=&quot;sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  
      &lt;!-- My JS --&gt;
      {% load static %}
      &lt;script src=&quot;{% static 'main.js' %}&quot;&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>The most important is how could I create search box that searches over all items, not only these rendered by the engine?</p>