netbox-community-netbox/netbox/templates/inc/paginator_htmx.html

{% load helpers %}

<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="{% 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>
          </a>
        {% endif %}
        {% for p in page.smart_pages %}
          {% if p %}
            <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 }}
            </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="{% 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>
          </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">
          Per Page
        </button>
        <ul class="dropdown-menu">
          {% for n in page.paginator.get_page_lengths %}
            <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 %}
        </ul>
      </div>
      <small class="text-end text-muted">
        Showing {{ page.start_index }}-{{ page.end_index }} of {{ page.paginator.count }}
      </small>
    {% endif %}
  </div>
</div>