Refactor HTMX properties for tables

This commit is contained in:
Jeremy Stretch 2024-02-01 20:26:12 -05:00
parent 6d06152573
commit a742f2ebfd
2 changed files with 15 additions and 30 deletions

View File

@ -2,7 +2,12 @@
{% load i18n %} {% load i18n %}
{% if page %} {% if page %}
<div class="d-flex justify-content-between align-items-center border-top p-2"> <div
class="d-flex justify-content-between align-items-center border-top p-2"
hx-target="closest .htmx-container"
hx-disinherit="hx-select hx-swap"
{% if not table.embedded %}hx-push-url="true"{% endif %}
>
{# Pages carousel #} {# Pages carousel #}
{% if paginator.num_pages > 1 %} {% if paginator.num_pages > 1 %}
@ -13,12 +18,7 @@
{% if page.has_previous %} {% if page.has_previous %}
<li class="page-item"> <li class="page-item">
{% if htmx %} {% if htmx %}
<a href="#" <a href="#" hx-get="{{ table.htmx_url }}{% querystring request page=page.previous_page_number %}" class="page-link">
hx-get="{{ table.htmx_url }}{% querystring request page=page.previous_page_number %}"
hx-target="closest .htmx-container"
{% if not table.embedded %}hx-push-url="true"{% endif %}
class="page-link"
>
<i class="mdi mdi-chevron-left"></i> <i class="mdi mdi-chevron-left"></i>
</a> </a>
{% else %} {% else %}
@ -34,12 +34,7 @@
{% for p in page.smart_pages %} {% for p in page.smart_pages %}
<li class="page-item{% if page.number == p %} active" aria-current="page{% endif %}"> <li class="page-item{% if page.number == p %} active" aria-current="page{% endif %}">
{% if p and htmx %} {% if p and htmx %}
<a href="#" <a href="#" hx-get="{{ table.htmx_url }}{% querystring request page=p %}" class="page-link">
hx-get="{{ table.htmx_url }}{% querystring request page=p %}"
hx-target="closest .htmx-container"
{% if not table.embedded %}hx-push-url="true"{% endif %}
class="page-link"
>
{{ p }} {{ p }}
</a> </a>
{% elif p %} {% elif p %}
@ -57,12 +52,7 @@
{% if page.has_next %} {% if page.has_next %}
<li class="page-item"> <li class="page-item">
{% if htmx %} {% if htmx %}
<a href="#" <a href="#" hx-get="{{ table.htmx_url }}{% querystring request page=page.next_page_number %}" class="page-link">
hx-get="{{ table.htmx_url }}{% querystring request page=page.next_page_number %}"
hx-target="closest .htmx-container"
{% if not table.embedded %}hx-push-url="true"{% endif %}
class="page-link"
>
<i class="mdi mdi-chevron-right"></i> <i class="mdi mdi-chevron-right"></i>
</a> </a>
{% else %} {% else %}
@ -97,12 +87,7 @@
<div class="dropdown-menu"> <div class="dropdown-menu">
{% for n in page.paginator.get_page_lengths %} {% for n in page.paginator.get_page_lengths %}
{% if htmx %} {% if htmx %}
<a href="#" <a href="#" hx-get="{{ table.htmx_url }}{% querystring request per_page=n %}" class="dropdown-item">{{ n }}</a>
hx-get="{{ table.htmx_url }}{% querystring request per_page=n %}"
hx-target="closest .htmx-container"
{% if not table.embedded %}hx-push-url="true"{% endif %}
class="dropdown-item"
>{{ n }}</a>
{% else %} {% else %}
<a href="{% querystring request per_page=n %}" class="dropdown-item">{{ n }}</a> <a href="{% querystring request per_page=n %}" class="dropdown-item">{{ n }}</a>
{% endif %} {% endif %}

View File

@ -1,7 +1,11 @@
{% load django_tables2 %} {% load django_tables2 %}
<table{% if table.attrs %} {{ table.attrs.as_html }}{% endif %}> <table{% if table.attrs %} {{ table.attrs.as_html }}{% endif %}>
{% if table.show_header %} {% if table.show_header %}
<thead> <thead
hx-target="closest .htmx-container"
hx-disinherit="hx-select hx-swap"
{% if not table.embedded %} hx-push-url="true"{% endif %}
>
<tr> <tr>
{% for column in table.columns %} {% for column in table.columns %}
{% if column.orderable %} {% if column.orderable %}
@ -10,16 +14,12 @@
<div class="float-end"> <div class="float-end">
<a href="#" <a href="#"
hx-get="{{ table.htmx_url }}{% querystring table.prefixed_order_by_field='' %}" hx-get="{{ table.htmx_url }}{% querystring table.prefixed_order_by_field='' %}"
hx-target="closest .htmx-container"
{% if not table.embedded %}hx-push-url="true"{% endif %}
class="text-danger" class="text-danger"
><i class="mdi mdi-close"></i></a> ><i class="mdi mdi-close"></i></a>
</div> </div>
{% endif %} {% endif %}
<a href="#" <a href="#"
hx-get="{{ table.htmx_url }}{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}" hx-get="{{ table.htmx_url }}{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}"
hx-target="closest .htmx-container"
{% if not table.embedded %}hx-push-url="true"{% endif %}
>{{ column.header }}</a> >{{ column.header }}</a>
</th> </th>
{% else %} {% else %}