push url on club search form submit

club/templates/club/club_list.jinja

@@ -22,10 +22,15 @@
 {% from "core/macros.jinja" import paginate_htmx %}
 
 {% block content %}
-  {% if not is_fragment %}
   <main>
     <h3>{% trans %}Filters{% endtrans %}</h3>
-      <form>
+    <form
+      id="club-list-filters"
+      hx-get="{{ url("club:club_list") }}"
+      hx-target="#content"
+      hx-swap="outerHtml"
+      hx-push-url="true"
+    >
       <div class="row gap-4x">
         {{ form }}
       </div>
@@ -40,8 +45,6 @@
         <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">
@@ -63,14 +66,11 @@
           </div>
         </div>
       {% endfor %}
-    {% if is_paginated %}
-      {{ paginate_htmx(request, page_obj, paginator, htmx_target="#paginated") }}
-    {% endif %}
     </section>
-  {% if not is_fragment %}
+    {% if is_paginated %}
-    </div>
+      {{ paginate_htmx(request, page_obj, paginator) }}
-    </main>
     {% 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 -%}