Django: показать другой список на основе клика по тегу "a"

Question

На моем Django веб-сайте я бы хотел, чтобы пользователь мог выбрать отображение двух разных списков, по одному, но на одной и той же странице, на основе клика пользователя по тегу «а»? Надеюсь, кто-нибудь может помочь! Если это невозможно, есть ли другой способ добиться этого? Я действительно не знаю, что я должен изменить. Большое спасибо!

views.py

class searchesView(TemplateView):
    template_name = "search/searches.html"

    def post(self, request, *args, **kwargs):
        print('FORM POSTED WITH {}'.format(request.POST['srh']))
        srch = request.POST.get('srh')
        if srch:
            sr = Info.objects.filter(Q(band__icontains=srch))
            sd = Info.objects.filter(Q(disco__icontains=srch))
            sp = Info.objects.filter(Q(band__icontains=srch) & Q(disco__icontains=srch))

            #if sr.exists() and sd.exists():
                #return render(self.request, 'search/searches.html')


        #else:
            paginator = Paginator(sr, 10)
            page_number = request.GET.get('page')
            page_obj = paginator.get_page(page_number)

            return render(self.request, 'search/searches.html', {'sr':sr,
                                                                       'sd': sd, 'sp':sp,
                                                                       'page_obj': page_obj
                                                                       })

        else:
            return render(self.request, 'search/searches.html')

шаблон:

    {% if sp %}
    <a href="{%url 'searches' sd%}" >Band: {{ request.POST.srh }}</a><br/>
    <a href="{%url 'searches'%}" >Album: {{ request.POST.srh }}</a>
    {% else %}

    {% if sd %}
    {% for y in sd %}
    <div class="container">

      <div class="album">

        {%if y.cover%}
        <img src= "{{y.cover.url}}" width="100%">
        {%endif%}
      </div>

      <div class="info">
        <table class="talbum" style="height:400px">
          <tr><th colspan="2"><h2>{{y.disco}}</h2></th></tr>
          <tr><td> Band: </td><td> {{y.band}} </td></tr>
          <tr><td> Anno: </td><td> {{y.anno}} </td></tr>
          <tr><td> Disco: </td><td> {{y.disco}} </td></tr>
          <tr><td> Etichetta: </td><td> {{y.etichetta_d}} </td></tr>
          <tr><td> Matrice: </td><td> {{y.matrice}} </td></tr>
        </table>

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


{% if sr %}
{% for k in sr %}
<div class="container_band">
  <div class=album_band>
    <!-- insert an image -->
    {%if k.cover%}
    <img src= "{{k.cover.url}}" width="100%">
    {%endif%}
  </div>

  <div class="info_band">
    <!-- insert table info -->
    <table>
      <tr><th><h2>{{k.band}}</h2></th></tr>
      <tr><td> Anno: </td><td> {{k.anno}} </td></tr>
      <tr><td> Disco: </td><td> {{k.disco}} </td></tr>
      <tr><td> Etichetta: </td><td> {{k.etichetta_d}} </td></tr>
      <tr><td> Matrice: </td><td> {{k.matrice}} </td></tr>
    </table>
  </div>
</div>
{%endfor%}


<div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page=1">&laquo; first</a>
            <a href="?page={{ page_obj.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
        </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">next</a>
            <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
        {% endif %}
    </span>



{% else %}

<div class="container">
  <div class="message">
    No results for "{{ request.POST.srh }}"
  </div>
  <div class="immagine"
  </div>
</div>

{%endif%}
{%endif%}
{%endif%}

Answer 1

Хорошо отображающее и изменяющее поведение внешнего интерфейса лежит в JavaScript королевстве. Чтобы достичь того, чего вы хотите, вы должны определить оболочку для содержимого, которое вы хотите переключить (скрыть / показать), и присвоить ему html идентификатор. Чтобы сделать это максимально просто, используйте jQuery toggle . Чтобы добиться того, чего вы хотите, лучше не использовать тег «a», поскольку при нажатии на него вы попадете на другой сайт, вместо этого вы можете использовать «кнопку». Итак, короткая инструкция с примером:

1. Определите два элемента, которые вы хотите скрыть / показать в зависимости от какого-либо действия (форма или таблица независимо от того)
2. Оберните каждый из элементов в div обертки и дать им идентификаторы

<div id="table"> whole table content </div>
<div> id="other_table"> another table content </div>

определить кнопку и присвоить ей идентификатор

<button id="btn_toggle">On click toggle tables</button>

В шаблоне определите скрипт следующим образом:

$( document ).ready(function() {
   // one of tables will be hidden on default
   $("#other_table").hide();
   $("#btn_toggle").click( function() {
      $("#other_table").toggle();
      $("#table").toggle();
    }

});

Если вам нужна дополнительная информация, просто спросите. Не забудьте включить jQuery в шаблон