Sync HTMX and non-HTMX paginator styles

netbox/templates/inc/paginator.html

@@ -1,51 +1,52 @@
 {% load helpers %}
 
-<div class="paginator float-end text-end">
+<div class="row">
+  <div class="col col-md-6 mb-0">
+    {# Page number carousel #}
     {% if paginator.num_pages > 1 %}
-    <div class="btn-group btn-group-sm mb-3" role="group" aria-label="Pages">    
-    {% if page.has_previous %}
-        <a href="{% querystring request page=page.previous_page_number %}" class="btn btn-outline-secondary">
+      <div class="btn-group btn-group-sm mb-3" role="group" aria-label="Pages">
+        {% if page.has_previous %}
+          <a href="{% querystring request page=page.previous_page_number %}" class="btn btn-outline-secondary">
             <i class="mdi mdi-chevron-double-left"></i>
-        </a>
-    {% endif %}
-    {% for p in page.smart_pages %}
-        {% if p %}
-        <a href="{% querystring request page=p %}" class="btn btn-outline-secondary{% if page.number == p %} active{% endif %}">
-            {{ p }}
-        </a>
-        {% else %}
-        <button type="button" class="btn btn-outline-secondary" disabled>
-            <span>&hellip;</span>
-        </button>
+          </a>
         {% endif %}
-    {% endfor %}
-    {% if page.has_next %}
-        <a href="{% querystring request page=page.next_page_number %}" class="btn btn-outline-secondary">
+        {% for p in page.smart_pages %}
+          {% if p %}
+            <a href="{% querystring request page=p %}" class="btn btn-outline-secondary{% if page.number == p %} active{% endif %}">
+              {{ p }}
+            </a>
+          {% else %}
+            <button type="button" class="btn btn-outline-secondary" disabled>
+              <span>&hellip;</span>
+            </button>
+          {% endif %}
+        {% endfor %}
+        {% if page.has_next %}
+          <a href="{% querystring request page=page.next_page_number %}" class="btn btn-outline-secondary">
             <i class="mdi mdi-chevron-double-right"></i>
-        </a>
-    {% endif %}
-    </div>
+          </a>
+        {% endif %}
+      </div>
     {% endif %}
-    <form method="get" class="mb-2">
-        {% for k, v_list in request.GET.lists %}
-            {% if k != 'per_page' %}
-                {% for v in v_list %}
-                    <input type="hidden" name="{{ k }}" value="{{ v }}" />
-                {% endfor %}
-            {% endif %}
+  </div>
+  <div class="col col-md-6 mb-0 text-end">
+    {# Per-page count selector #}
+    <div class="dropdown dropup">
+      <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
+        Per Page
+      </button>
+      <ul class="dropdown-menu">
+        {% for n in page.paginator.get_page_lengths %}
+          <li>
+            <a href="{% querystring request per_page=n %}" class="dropdown-item">{{ n }}</a>
+          </li>
         {% endfor %}
-        <div class="input-group input-group-sm">
-            <select name="per_page" class="form-select per-page">
-            {% for n in page.paginator.get_page_lengths %}
-                <option value="{{ n }}"{% if page.paginator.per_page == n %} selected="selected"{% endif %}>{{ n }}</option>
-            {% endfor %}
-            </select>
-            <label class="input-group-text" for="per_page">Per Page</label>
-        </div>
-    </form>
+      </ul>
+    </div>
     {% if page %}
-    <small class="text-end text-muted">
+      <small class="text-end text-muted">
         Showing {{ page.start_index }}-{{ page.end_index }} of {{ page.paginator.count }}
-    </small>
+      </small>
     {% endif %}
+  </div>
 </div>

netbox/templates/inc/paginator_htmx.html

@@ -2,6 +2,7 @@
 
 <div class="row">
   <div class="col col-md-6 mb-0">
+    {# Page number carousel #}
     {% if paginator.num_pages > 1 %}
       <div class="btn-group btn-group-sm" role="group" aria-label="Pages">
         {% if page.has_previous %}
@@ -44,6 +45,7 @@
     {% endif %}
   </div>
   <div class="col col-md-6 mb-0 text-end">
+    {# Per-page count selector #}
     <div class="dropdown dropup">
       <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
         Per Page
@@ -61,5 +63,10 @@
         {% endfor %}
       </ul>
     </div>
+    {% if page %}
+      <small class="text-end text-muted">
+        Showing {{ page.start_index }}-{{ page.end_index }} of {{ page.paginator.count }}
+      </small>
+    {% endif %}
   </div>
 </div>