push url on club search form submit

club/templates/club/club_list.jinja

@@ -22,55 +22,55 @@
 {% from "core/macros.jinja" import paginate_htmx %}
 
 {% block content %}
-  {% if not is_fragment %}
+  <main>
-    <main>
+    <h3>{% trans %}Filters{% endtrans %}</h3>
-      <h3>{% trans %}Filters{% endtrans %}</h3>
+    <form
-      <form>
+      id="club-list-filters"
-        <div class="row gap-4x">
+      hx-get="{{ url("club:club_list") }}"
-          {{ form }}
+      hx-target="#content"
-        </div>
+      hx-swap="outerHtml"
-        <button type="submit" class="btn btn-blue margin-bottom">
+      hx-push-url="true"
-          <i class="fa fa-magnifying-glass"></i>{% trans %}Search{% endtrans %}
+    >
-        </button>
+      <div class="row gap-4x">
-      </form>
+        {{ form }}
-      <h3>{% trans %}Club list{% endtrans %}</h3>
-      {% if user.has_perm("club.add_club") %}
-        <br>
-        <a href="{{ url('club:club_new') }}" class="btn btn-blue">
-          <i class="fa fa-plus"></i> {% trans %}New club{% endtrans %}
-        </a>
-      {% endif %}
-      <div id="paginated">
-  {% endif %}
-  <section class="aria-busy-grow" id="club-list">
-    {% for club in object_list %}
-      <div class="card">
-        {% set club_url = club.get_absolute_url() %}
-        <a href="{{ club_url }}">
-          {% if club.logo %}
-            <img class="club-image" src="{{ club.logo.url }}" alt="logo {{ club.name }}">
-          {% else %}
-            <i class="fa-regular fa-image fa-4x club-image"></i>
-          {% endif %}
-        </a>
-        <div class="content">
-          <a href="{{ club_url }}">
-            <h4>
-              {{ club.name }} {% if not club.is_active %}({% trans %}inactive{% endtrans %}){% endif %}
-            </h4>
-          </a>
-          {{ club.short_description|markdown }}
-        </div>
       </div>
-    {% endfor %}
+      <button type="submit" class="btn btn-blue margin-bottom">
-    {% if is_paginated %}
+        <i class="fa fa-magnifying-glass"></i>{% trans %}Search{% endtrans %}
-      {{ paginate_htmx(request, page_obj, paginator, htmx_target="#paginated") }}
+      </button>
+    </form>
+    <h3>{% trans %}Club list{% endtrans %}</h3>
+    {% if user.has_perm("club.add_club") %}
+      <br>
+      <a href="{{ url('club:club_new') }}" class="btn btn-blue">
+        <i class="fa fa-plus"></i> {% trans %}New club{% endtrans %}
+      </a>
     {% endif %}
-  </section>
+    <section class="aria-busy-grow" id="club-list">
-  {% if not is_fragment %}
+      {% for club in object_list %}
-    </div>
+        <div class="card">
-    </main>
+          {% set club_url = club.get_absolute_url() %}
-  {% endif %}
+          <a href="{{ club_url }}">
+            {% if club.logo %}
+              <img class="club-image" src="{{ club.logo.url }}" alt="logo {{ club.name }}">
+            {% else %}
+              <i class="fa-regular fa-image fa-4x club-image"></i>
+            {% endif %}
+          </a>
+          <div class="content">
+            <a href="{{ club_url }}">
+              <h4>
+                {{ club.name }} {% if not club.is_active %}({% trans %}inactive{% endtrans %}){% endif %}
+              </h4>
+            </a>
+            {{ club.short_description|markdown }}
+          </div>
+        </div>
+      {% endfor %}
+    </section>
+    {% if is_paginated %}
+      {{ paginate_htmx(request, page_obj, paginator) }}
+    {% endif %}
+  </main>
 {% endblock %}
 
 

club/views.py

@@ -206,7 +206,7 @@ class ClubListView(AllowFragment, FormMixin, ListView):
     template_name = "club/club_list.jinja"
     form_class = ClubSearchForm
     queryset = Club.objects.order_by("name")
-    paginate_by = 1
+    paginate_by = 20
 
     def get_form_kwargs(self):
         res = super().get_form_kwargs()

core/templates/core/macros.jinja

@@ -129,10 +129,10 @@
         current_page (django.core.paginator.Page): the current page object
         paginator (django.core.paginator.Paginator): the paginator object
     #}
-  {{ paginate_server_side(request, current_page, paginator, "") }}
+  {{ paginate_server_side(request, current_page, paginator, False) }}
 {% endmacro %}
 
-{% macro paginate_htmx(request, current_page, paginator, htmx_target="#content") %}
+{% macro paginate_htmx(request, current_page, paginator) %}
     {# Add pagination buttons for pages without Alpine but supporting fragments.
 
     This must be coupled with a view that handles pagination
@@ -144,19 +144,18 @@
         request (django.http.request.HttpRequest): the current django request
         current_page (django.core.paginator.Page): the current page object
         paginator (django.core.paginator.Paginator): the paginator object
-        htmx_target (string): htmx target selector (default '#content')
     #}
-  {{ paginate_server_side(request, current_page, paginator, htmx_target) }}
+  {{ paginate_server_side(request, current_page, paginator, True) }}
 {% endmacro %}
 
-{% macro paginate_server_side(request, current_page, paginator, htmx_target) %}
+{% macro paginate_server_side(request, current_page, paginator, use_htmx) %}
   <nav class="pagination">
     {% if current_page.has_previous() %}
       <a
-        {% if htmx_target -%}
+        {% if use_htmx -%}
           hx-get="?{{ querystring(request, page=current_page.previous_page_number()) }}"
           hx-swap="innerHTML"
-          hx-target="{{ htmx_target }}"
+          hx-target="#content"
           hx-push-url="true"
           hx-trigger="click, keyup[key=='ArrowLeft'] from:body"
         {%- else -%}
@@ -177,10 +176,10 @@
         <strong>{{ paginator.ELLIPSIS }}</strong>
       {% else %}
         <a
-          {% if htmx_target -%}
+          {% if use_htmx -%}
             hx-get="?{{ querystring(request, page=i) }}"
             hx-swap="innerHTML"
-            hx-target="{{ htmx_target }}"
+            hx-target="#content"
             hx-push-url="true"
           {%- else -%}
             href="?{{ querystring(request, page=i) }}"
@@ -192,10 +191,10 @@
     {% endfor %}
     {% if current_page.has_next() %}
       <a
-        {% if htmx_target -%}
+        {% if use_htmx -%}
           hx-get="?{{querystring(request, page=current_page.next_page_number())}}"
           hx-swap="innerHTML"
-          hx-target="{{ htmx_target }}"
+          hx-target="#content"
           hx-push-url="true"
           hx-trigger="click, keyup[key=='ArrowRight'] from:body"
         {%- else -%}