Allow custom target for htmx pagination

club/templates/club/club_list.jinja

@@ -22,55 +22,55 @@
 {% from "core/macros.jinja" import paginate_htmx %}
 
 {% block content %}
-  <main>
-    <h3>{% trans %}Filters{% endtrans %}</h3>
-    <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>
-      <button type="submit" class="btn btn-blue margin-bottom">
-        <i class="fa fa-magnifying-glass"></i>{% trans %}Search{% endtrans %}
-      </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 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>
+  {% if not is_fragment %}
+    <main>
+      <h3>{% trans %}Filters{% endtrans %}</h3>
+      <form>
+        <div class="row gap-4x">
+          {{ form }}
         </div>
-      {% endfor %}
-    </section>
+        <button type="submit" class="btn btn-blue margin-bottom">
+          <i class="fa fa-magnifying-glass"></i>{% trans %}Search{% endtrans %}
+        </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 %}
+      <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 %}
     {% if is_paginated %}
-      {{ paginate_htmx(request, page_obj, paginator) }}
+      {{ paginate_htmx(request, page_obj, paginator, htmx_target="#paginated") }}
     {% endif %}
-  </main>
+  </section>
+  {% if not is_fragment %}
+    </div>
+    </main>
+  {% endif %}
 {% 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 = 20
+    paginate_by = 1
 
     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, False) }}
+  {{ paginate_server_side(request, current_page, paginator, "") }}
 {% endmacro %}
 
-{% macro paginate_htmx(request, current_page, paginator) %}
+{% macro paginate_htmx(request, current_page, paginator, htmx_target="#content") %}
     {# Add pagination buttons for pages without Alpine but supporting fragments.
 
     This must be coupled with a view that handles pagination
@@ -144,18 +144,19 @@
         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, True) }}
+  {{ paginate_server_side(request, current_page, paginator, htmx_target) }}
 {% endmacro %}
 
-{% macro paginate_server_side(request, current_page, paginator, use_htmx) %}
+{% macro paginate_server_side(request, current_page, paginator, htmx_target) %}
   <nav class="pagination">
     {% if current_page.has_previous() %}
       <a
-        {% if use_htmx -%}
+        {% if htmx_target -%}
           hx-get="?{{ querystring(request, page=current_page.previous_page_number()) }}"
           hx-swap="innerHTML"
-          hx-target="#content"
+          hx-target="{{ htmx_target }}"
           hx-push-url="true"
           hx-trigger="click, keyup[key=='ArrowLeft'] from:body"
         {%- else -%}
@@ -176,10 +177,10 @@
         <strong>{{ paginator.ELLIPSIS }}</strong>
       {% else %}
         <a
-          {% if use_htmx -%}
+          {% if htmx_target -%}
             hx-get="?{{ querystring(request, page=i) }}"
             hx-swap="innerHTML"
-            hx-target="#content"
+            hx-target="{{ htmx_target }}"
             hx-push-url="true"
           {%- else -%}
             href="?{{ querystring(request, page=i) }}"
@@ -191,10 +192,10 @@
     {% endfor %}
     {% if current_page.has_next() %}
       <a
-        {% if use_htmx -%}
+        {% if htmx_target -%}
           hx-get="?{{querystring(request, page=current_page.next_page_number())}}"
           hx-swap="innerHTML"
-          hx-target="#content"
+          hx-target="{{ htmx_target }}"
           hx-push-url="true"
           hx-trigger="click, keyup[key=='ArrowRight'] from:body"
         {%- else -%}