Allow custom target for htmx pagination

club/templates/club/club_list.jinja

@@ -22,14 +22,10 @@
 {% 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"
-    >
         <div class="row gap-4x">
           {{ form }}
         </div>
@@ -44,6 +40,8 @@
           <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">
@@ -65,11 +63,14 @@
         </div>
       </div>
     {% endfor %}
-    </section>
     {% if is_paginated %}
-      {{ paginate_htmx(request, page_obj, paginator) }}
+      {{ paginate_htmx(request, page_obj, paginator, htmx_target="#paginated") }}
     {% endif %}
+  </section>
+  {% if not is_fragment %}
+    </div>
     </main>
+  {% endif %}
 {% endblock %}
 
 

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 -%}