netbox/netbox/templates/inc/paginator_htmx.html

{% load helpers %}
{% load i18n %}

<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 %}
          <a href="#"
             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="btn btn-outline-secondary"
          >
            <i class="mdi mdi-chevron-double-left"></i>
          </a>
        {% endif %}
        {% for p in page.smart_pages %}
          {% if p %}
            <a href="#"
               hx-get="{{ table.htmx_url }}{% querystring request page=p %}"
               hx-target="closest .htmx-container"
             {% if not table.embedded %}hx-push-url="true"{% endif %}
               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="#"
             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="btn btn-outline-secondary"
          >
            <i class="mdi mdi-chevron-double-right"></i>
          </a>
        {% endif %}
      </div>
    {% endif %}
  </div>
  <div class="col col-md-6 mb-0 text-end">
    {# Per-page count selector #}
    {% if page %}
      <div class="dropdown dropup">
        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
          {% trans "Per Page" %}
        </button>
        <ul class="dropdown-menu">
          {% for n in page.paginator.get_page_lengths %}
            <li>
              <a href="#"
                 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>
            </li>
          {% endfor %}
        </ul>
      </div>
      <small class="text-end text-muted">
        {% blocktrans with start=page.start_index end=page.end_index total=page.paginator.count %}
          Showing {{ start }}-{{ end }} of {{ total }}
        {% endblocktrans %}
      </small>
    {% endif %}
  </div>
</div>