Procházet zdrojové kódy

Push HTMX URL to browser location

jeremystretch před 4 roky
rodič
revize
6dd6094088

+ 26 - 4
netbox/templates/inc/paginator_htmx.html

@@ -5,13 +5,23 @@
     {% if paginator.num_pages > 1 %}
     {% if paginator.num_pages > 1 %}
       <div class="btn-group btn-group-sm" role="group" aria-label="Pages">
       <div class="btn-group btn-group-sm" role="group" aria-label="Pages">
         {% if page.has_previous %}
         {% if page.has_previous %}
-          <a href="#" hx-get="{% querystring request page=page.previous_page_number %}" hx-target="#object_list" class="btn btn-outline-secondary">
+          <a href="#"
+             hx-get="{% querystring request page=page.previous_page_number %}"
+             hx-target="#object_list"
+             hx-push-url="true"
+             class="btn btn-outline-secondary"
+          >
             <i class="mdi mdi-chevron-double-left"></i>
             <i class="mdi mdi-chevron-double-left"></i>
           </a>
           </a>
         {% endif %}
         {% endif %}
         {% for p in page.smart_pages %}
         {% for p in page.smart_pages %}
           {% if p %}
           {% if p %}
-            <a href="#" hx-get="{% querystring request page=p %}" hx-target="#object_list" class="btn btn-outline-secondary{% if page.number == p %} active{% endif %}">
+            <a href="#"
+               hx-get="{% querystring request page=p %}"
+               hx-target="#object_list"
+               hx-push-url="true"
+               class="btn btn-outline-secondary{% if page.number == p %} active{% endif %}"
+            >
               {{ p }}
               {{ p }}
             </a>
             </a>
           {% else %}
           {% else %}
@@ -21,7 +31,12 @@
           {% endif %}
           {% endif %}
         {% endfor %}
         {% endfor %}
         {% if page.has_next %}
         {% if page.has_next %}
-          <a href="#" hx-get="{% querystring request page=page.next_page_number %}" hx-target="#object_list" class="btn btn-outline-secondary">
+          <a href="#"
+             hx-get="{% querystring request page=page.next_page_number %}"
+             hx-target="#object_list"
+             hx-push-url="true"
+             class="btn btn-outline-secondary"
+          >
             <i class="mdi mdi-chevron-double-right"></i>
             <i class="mdi mdi-chevron-double-right"></i>
           </a>
           </a>
         {% endif %}
         {% endif %}
@@ -35,7 +50,14 @@
       </button>
       </button>
       <ul class="dropdown-menu">
       <ul class="dropdown-menu">
         {% for n in page.paginator.get_page_lengths %}
         {% for n in page.paginator.get_page_lengths %}
-          <li><a class="dropdown-item" href="#" hx-get="{% querystring request per_page=n %}" hx-target="#object_list">{{ n }}</a></li>
+          <li>
+            <a href="#"
+               hx-get="{% querystring request per_page=n %}"
+               hx-target="#object_list"
+               hx-push-url="true"
+               class="dropdown-item"
+            >{{ n }}</a>
+          </li>
         {% endfor %}
         {% endfor %}
       </ul>
       </ul>
     </div>
     </div>

+ 7 - 1
netbox/templates/inc/table_htmx.html

@@ -6,7 +6,13 @@
       <tr>
       <tr>
         {% for column in table.columns %}
         {% for column in table.columns %}
           {% if column.orderable %}
           {% if column.orderable %}
-            <th {{ column.attrs.th.as_html }}><a href="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}" hx-get="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}" hx-target="#object_list">{{ column.header }}</a></th>
+            <th {{ column.attrs.th.as_html }}>
+              <a href="#"
+                 hx-get="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}"
+                 hx-target="#object_list"
+                 hx-push-url="true"
+              >{{ column.header }}</a>
+            </th>
           {% else %}
           {% else %}
             <th {{ column.attrs.th.as_html }}>{{ column.header }}</th>
             <th {{ column.attrs.th.as_html }}>{{ column.header }}</th>
           {% endif %}
           {% endif %}