Fixes #16101: Fix initial loading of pagination widget for dynamic object tables

netbox/templates/htmx/table.html

@@ -2,15 +2,17 @@
 {% load helpers %}
 {% load render_table from django_tables2 %}
 
-{% with preferences|get_key:"pagination.placement" as paginator_placement %}
-  {% if paginator_placement == 'top' or paginator_placement == 'both' %}
-    {% include 'inc/paginator.html' with htmx=True table=table paginator=table.paginator page=table.page placement='top' %}
-  {% endif %}
-  {% render_table table 'inc/table_htmx.html' %}
-  {% if paginator_placement != 'top' %}
-    {% include 'inc/paginator.html' with htmx=True table=table paginator=table.paginator page=table.page %}
-  {% endif %}
-{% endwith %}
+<div class="htmx-container table-responsive">
+  {% with preferences|get_key:"pagination.placement" as paginator_placement %}
+    {% if paginator_placement == 'top' or paginator_placement == 'both' %}
+      {% include 'inc/paginator.html' with htmx=True table=table paginator=table.paginator page=table.page placement='top' %}
+    {% endif %}
+    {% render_table table 'inc/table_htmx.html' %}
+    {% if paginator_placement != 'top' %}
+      {% include 'inc/paginator.html' with htmx=True table=table paginator=table.paginator page=table.page %}
+    {% endif %}
+  {% endwith %}
+</div>
 
 {# Include the updated object count for display elsewhere on the page #}
 <div class="d-none" hx-swap-oob="innerHTML:.total-object-count">{{ table.rows|length }}</div>

netbox/templates/inc/paginator.html

@@ -5,7 +5,8 @@
   <div
       class="d-flex justify-content-between align-items-center border-{% if placement == 'top' %}bottom{% else %}top{% endif %} p-2"
       hx-target="closest .htmx-container"
-      hx-disinherit="hx-select hx-swap"
+      hx-disinherit="hx-select"
+      hx-swap="outerHTML"
       {% if not table.embedded %}hx-push-url="true"{% endif %}
   >
 

netbox/templates/inc/table_htmx.html

@@ -1,5 +1,5 @@
 {% load django_tables2 %}
-<table{% if table.attrs %} {{ table.attrs.as_html }}{% endif %} hx-disinherit="hx-target hx-select hx-swap">
+<table{% if table.attrs %} {{ table.attrs.as_html }}{% endif %} hx-disinherit="hx-target hx-select" hx-swap="outerHTML">
   {% if table.show_header %}
     <thead
         hx-target="closest .htmx-container"

netbox/utilities/templates/builtins/htmx_table.html

@@ -1,5 +1,5 @@
 <div class="htmx-container table-responsive"
   hx-get="{% url viewname %}{% if url_params %}?{{ url_params.urlencode }}{% endif %}"
   hx-target="this"
-  hx-trigger="load" hx-select="table" hx-swap="innerHTML"
+  hx-trigger="load" hx-select=".htmx-container" hx-swap="outerHTML"
 ></div>