Closes #1870: Add per-page toggle to object lists

CHANGELOG.md

@@ -3,6 +3,7 @@ v2.5.3 (FUTURE)
 ## Enhancements
 
 * [#1630](https://github.com/digitalocean/netbox/issues/1630) - Enable bulk editing of prefix/IP mask length
+* [#1870](https://github.com/digitalocean/netbox/issues/1870) - Add per-page toggle to object lists
 * [#1871](https://github.com/digitalocean/netbox/issues/1871) - Enable filtering sites by parent region
 * [#2693](https://github.com/digitalocean/netbox/issues/2693) - Additional cable colors
 * [#2726](https://github.com/digitalocean/netbox/issues/2726) - Include cables in global search

netbox/netbox/settings.py

@@ -246,6 +246,14 @@ LOGIN_URL = '/{}login/'.format(BASE_PATH)
 # Secrets
 SECRETS_MIN_PUBKEY_SIZE = 2048
 
+# Pagination
+PER_PAGE_DEFAULTS = [
+    25, 50, 100, 250, 500, 1000
+]
+if PAGINATE_COUNT not in PER_PAGE_DEFAULTS:
+    PER_PAGE_DEFAULTS.append(PAGINATE_COUNT)
+    PER_PAGE_DEFAULTS = sorted(PER_PAGE_DEFAULTS)
+
 # Django filters
 FILTERS_NULL_CHOICE_LABEL = 'None'
 FILTERS_NULL_CHOICE_VALUE = 'null'

netbox/project-static/css/base.css

@@ -140,6 +140,9 @@ table.attr-table td:nth-child(1) {
 div.paginator {
     margin-bottom: 20px;
 }
+div.paginator form {
+    margin-bottom: 6px;
+}
 nav ul.pagination {
     margin-top: 0;
     margin-bottom: 8px !important;

netbox/project-static/js/forms.js

@@ -1,5 +1,10 @@
 $(document).ready(function() {
 
+    // Pagination
+    $('select#per_page').change(function() {
+        this.form.submit();
+    });
+
     // "Toggle" checkbox for object lists (PK column)
     $('input:checkbox.toggle').click(function() {
         $(this).closest('table').find('input:checkbox[name=pk]').prop('checked', $(this).prop('checked'));

netbox/templates/inc/paginator.html

@@ -1,6 +1,6 @@
 {% load helpers %}
 
-<div class="paginator pull-right">
+<div class="paginator pull-right text-right">
     {% if paginator.num_pages > 1 %}
         <nav>
             <ul class="pagination pull-right">
@@ -19,6 +19,13 @@
                 {% endif %}
             </ul>
         </nav>
+        <form method="get">
+            <select name="per_page" id="per_page">
+                {% for n in settings.PER_PAGE_DEFAULTS %}
+                    <option value="{{ n }}"{% if page.paginator.per_page == n %} selected="selected"{% endif %}>{{ n }}</option>
+                {% endfor %}
+            </select> per page
+        </form>
     {% endif %}
     {% if page %}
         <div class="text-right text-muted">

netbox/templates/responsive_table.html

@@ -3,6 +3,3 @@
 <div class="table-responsive">
     {% render_table table 'inc/table.html' %}
 </div>
-{% with paginator=table.paginator page=table.page %}
-    {% include 'inc/paginator.html' %}
-{% endwith %}

netbox/templates/utilities/obj_table.html

@@ -28,19 +28,22 @@
             </div>
         {% endif %}
         {% include table_template|default:'responsive_table.html' %}
-        {% block extra_actions %}{% endblock %}
-        {% if bulk_edit_url and permissions.change %}
-            <button type="submit" name="_edit" formaction="{% url bulk_edit_url %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}" class="btn btn-warning btn-sm">
-                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit Selected
-            </button>
-        {% endif %}
-        {% if bulk_delete_url and permissions.delete %}
-            <button type="submit" name="_delete" formaction="{% url bulk_delete_url %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}" class="btn btn-danger btn-sm">
-                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete Selected
-            </button>
-        {% endif %}
+        <div class="pull-left">
+            {% block extra_actions %}{% endblock %}
+            {% if bulk_edit_url and permissions.change %}
+                <button type="submit" name="_edit" formaction="{% url bulk_edit_url %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}" class="btn btn-warning btn-sm">
+                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit Selected
+                </button>
+            {% endif %}
+            {% if bulk_delete_url and permissions.delete %}
+                <button type="submit" name="_delete" formaction="{% url bulk_delete_url %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}" class="btn btn-danger btn-sm">
+                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete Selected
+                </button>
+            {% endif %}
+        </div>
     </form>
 {% else %}
     {% include table_template|default:'responsive_table.html' %}
 {% endif %}
+    {% include 'inc/paginator.html' with paginator=table.paginator page=table.page %}
 <div class="clearfix"></div>