Fixes #1187: Fixed table pagination by introducing a custom table template

netbox/ipam/tables.py

@@ -70,9 +70,9 @@ IPADDRESS_LINK = """
 {% if record.pk %}
     <a href="{{ record.get_absolute_url }}">{{ record.address }}</a>
 {% elif perms.ipam.add_ipaddress %}
-    <a href="{% url 'ipam:ipaddress_add' %}?address={{ record.1 }}{% if prefix.vrf %}&vrf={{ prefix.vrf.pk }}{% endif %}" class="btn btn-xs btn-success">{% if record.0 <= 65536 %}{{ record.0 }}{% else %}Lots of{% endif %} free IP{{ record.0|pluralize }}</a>
+    <a href="{% url 'ipam:ipaddress_add' %}?address={{ record.1 }}{% if prefix.vrf %}&vrf={{ prefix.vrf.pk }}{% endif %}" class="btn btn-xs btn-success">{% if record.0 <= 65536 %}{{ record.0 }}{% else %}Many{% endif %} IP{{ record.0|pluralize }} available</a>
 {% else %}
-    {{ record.0 }}
+    {% if record.0 <= 65536 %}{{ record.0 }}{% else %}Many{% endif %} IP{{ record.0|pluralize }} available
 {% endif %}
 """
 

netbox/templates/circuits/circuit_import.html

@@ -1,6 +1,4 @@
 {% extends 'utilities/obj_import.html' %}
-{% load render_table from django_tables2 %}
-{% load form_helpers %}
 
 {% block title %}Circuit Import{% endblock %}
 

netbox/templates/circuits/provider_import.html

@@ -1,6 +1,4 @@
 {% extends 'utilities/obj_import.html' %}
-{% load render_table from django_tables2 %}
-{% load form_helpers %}
 
 {% block title %}Provider Import{% endblock %}
 

netbox/templates/dcim/console_connections_import.html

@@ -1,6 +1,4 @@
 {% extends 'utilities/obj_import.html' %}
-{% load render_table from django_tables2 %}
-{% load form_helpers %}
 
 {% block title %}Console Connections Import{% endblock %}
 

netbox/templates/dcim/console_connections_list.html

@@ -1,5 +1,4 @@
 {% extends '_base.html' %}
-{% load render_table from django_tables2 %}
 
 {% block title %}Console Connections{% endblock %}
 
@@ -16,7 +15,7 @@
 <h1>Console Connections</h1>
 <div class="row">
 	<div class="col-md-9">
-        {% render_table table 'table.html' %}
+        {% include 'responsive_table.html' %}
     </div>
     <div class="col-md-3">
 		{% include 'inc/search_panel.html' %}

netbox/templates/dcim/device.html

@@ -1,6 +1,5 @@
 {% extends '_base.html' %}
 {% load static from staticfiles %}
-{% load render_table from django_tables2 %}
 {% load helpers %}
 
 {% block title %}{{ device }}{% endblock %}

netbox/templates/dcim/device_import.html

@@ -1,5 +1,4 @@
 {% extends '_base.html' %}
-{% load render_table from django_tables2 %}
 {% load form_helpers %}
 
 {% block title %}Device Import{% endblock %}

netbox/templates/dcim/device_import_child.html

@@ -1,5 +1,4 @@
 {% extends '_base.html' %}
-{% load render_table from django_tables2 %}
 {% load form_helpers %}
 
 {% block title %}Device Import{% endblock %}

netbox/templates/dcim/devicetype.html

@@ -1,6 +1,5 @@
 {% extends '_base.html' %}
 {% load helpers %}
-{% load render_table from django_tables2 %}
 
 {% block title %}{{ devicetype.manufacturer }} {{ devicetype.model }}{% endblock %}
 

netbox/templates/dcim/inc/devicetype_component_table.html

@@ -1,4 +1,3 @@
-{% load render_table from django_tables2 %}
 {% if perms.dcim.change_devicetype %}
     <form method="post">
         {% csrf_token %}
@@ -19,7 +18,7 @@
                     {% endif %}
                 </div>
             </div>
-            {% render_table table 'table.html' %}
+            {% include 'responsive_table.html' %}
             <div class="panel-footer">
                 {% if table.rows %}
                     {% if edit_url %}
@@ -48,6 +47,6 @@
         <div class="panel-heading">
             <strong>{{ title }}</strong>
         </div>
-        {% render_table table 'table.html' %}
+        {% include 'responsive_table.html' %}
     </div>
 {% endif %}

netbox/templates/dcim/interface_connections_import.html

@@ -1,6 +1,4 @@
 {% extends 'utilities/obj_import.html' %}
-{% load render_table from django_tables2 %}
-{% load form_helpers %}
 
 {% block title %}Interface Connections Import{% endblock %}
 

netbox/templates/dcim/interface_connections_list.html

@@ -1,5 +1,4 @@
 {% extends '_base.html' %}
-{% load render_table from django_tables2 %}
 
 {% block title %}Interface Connections{% endblock %}
 
@@ -16,7 +15,7 @@
 <h1>Interface Connections</h1>
 <div class="row">
 	<div class="col-md-9">
-        {% render_table table 'table.html' %}
+        {% include 'responsive_table.html' %}
     </div>
     <div class="col-md-3">
 		{% include 'inc/search_panel.html' %}

netbox/templates/dcim/power_connections_import.html

@@ -1,6 +1,4 @@
 {% extends 'utilities/obj_import.html' %}
-{% load render_table from django_tables2 %}
-{% load form_helpers %}
 
 {% block title %}Power Connections Import{% endblock %}
 

netbox/templates/dcim/power_connections_list.html

@@ -1,5 +1,4 @@
 {% extends '_base.html' %}
-{% load render_table from django_tables2 %}
 
 {% block title %}Power Connections{% endblock %}
 
@@ -16,7 +15,7 @@
 <h1>Power Connections</h1>
 <div class="row">
 	<div class="col-md-9">
-        {% render_table table 'table.html' %}
+        {% include 'responsive_table.html' %}
     </div>
     <div class="col-md-3">
 		{% include 'inc/search_panel.html' %}

netbox/templates/dcim/rack.html

@@ -1,6 +1,5 @@
 {% extends '_base.html' %}
 {% load helpers %}
-{% load render_table from django_tables2 %}
 
 {% block title %}{{ rack.site }} - Rack {{ rack.name }}{% endblock %}
 

netbox/templates/dcim/rack_elevation_list.html

@@ -11,24 +11,25 @@
     {% if page %}
         <div class="col-md-9">
             <div style="white-space: nowrap; overflow-x: scroll;">
-            {% for rack in page %}
-                <div style="display: inline-block; width: 266px">
-                    <div class="rack_header">
-                        <h4><a href="{% url 'dcim:rack' pk=rack.pk %}">{{ rack.name }}</a></h4>
+                {% for rack in page %}
+                    <div style="display: inline-block; width: 266px">
+                        <div class="rack_header">
+                            <h4><a href="{% url 'dcim:rack' pk=rack.pk %}">{{ rack.name }}</a></h4>
+                        </div>
+                        {% if face_id %}
+                            {% include 'dcim/inc/rack_elevation.html' with primary_face=rack.get_rear_elevation secondary_face=rack.get_front_elevation face_id=1 %}
+                        {% else %}
+                            {% include 'dcim/inc/rack_elevation.html' with primary_face=rack.get_front_elevation secondary_face=rack.get_rear_elevation face_id=0 %}
+                        {% endif %}
+                        <div class="clearfix"></div>
+                        <div class="rack_header">
+                            <h4><a href="{% url 'dcim:rack' pk=rack.pk %}">{{ rack.name }}</a></h4>
+                        </div>
                     </div>
-                    {% if face_id %}
-                        {% include 'dcim/inc/rack_elevation.html' with primary_face=rack.get_rear_elevation secondary_face=rack.get_front_elevation face_id=1 %}
-                    {% else %}
-                        {% include 'dcim/inc/rack_elevation.html' with primary_face=rack.get_front_elevation secondary_face=rack.get_rear_elevation face_id=0 %}
-                    {% endif %}
-                    <div class="clearfix"></div>
-                    <div class="rack_header">
-                        <h4><a href="{% url 'dcim:rack' pk=rack.pk %}">{{ rack.name }}</a></h4>
-                    </div>
-                </div>
-            {% endfor %}
+                {% endfor %}
             </div>
-            {% include 'paginator.html' %}
+            <br />
+            {% include 'inc/paginator.html' %}
         </div>
     {% else %}
         <div class="col-md-9">

netbox/templates/dcim/rack_import.html

@@ -1,6 +1,4 @@
 {% extends 'utilities/obj_import.html' %}
-{% load render_table from django_tables2 %}
-{% load form_helpers %}
 
 {% block title %}Rack Import{% endblock %}
 

netbox/templates/dcim/site.html

@@ -1,6 +1,5 @@
 {% extends '_base.html' %}
 {% load static from staticfiles %}
-{% load render_table from django_tables2 %}
 {% load helpers %}
 
 {% block title %}{{ site }}{% endblock %}

netbox/templates/dcim/site_import.html

@@ -1,5 +1,4 @@
 {% extends '_base.html' %}
-{% load render_table from django_tables2 %}
 {% load form_helpers %}
 
 {% block title %}Site Import{% endblock %}

netbox/templates/home.html

@@ -1,5 +1,4 @@
 {% extends '_base.html' %}
-{% load render_table from django_tables2 %}
 
 {% block content %}
 {% include 'search_form.html' %}

netbox/templates/import_success.html

@@ -1,9 +1,8 @@
 {% extends '_base.html' %}
-{% load render_table from django_tables2 %}
 
 {% block content %}
     <h1>{% block title %}Import Completed{% endblock %}</h1>
-    {% render_table table %}
+    {% include 'responsive_table.html' %}
     <a href="{{ request.path }}" class="btn btn-primary">
         <span class="fa fa-download" aria-hidden="true"></span>
         Import more

netbox/templates/paginator.html

@@ -1,11 +1,11 @@
 {% load helpers %}
 
-<div class="paginator pull-right" style="margin-top: 20px">
+<div class="paginator pull-right">
     {% if paginator.num_pages > 1 %}
         <nav>
             <ul class="pagination pull-right">
                 {% if page.has_previous %}
-                    <li><a href="{% querystring request page=page.previous_page_number %}">&laquo;</a></li>
+                    <li><a href="{% querystring request page=page.previous_page_number %}"><i class="fa fa-angle-double-left"></i></a></li>
                 {% endif %}
                 {% for p in page.smart_pages %}
                     {% if p %}
@@ -15,13 +15,14 @@
                     {% endif %}
                 {% endfor %}
                 {% if page.has_next %}
-                    <li><a href="{% querystring request page=page.next_page_number %}">&raquo;</a></li>
+                    <li><a href="{% querystring request page=page.next_page_number %}"><i class="fa fa-angle-double-right"></i></a></li>
                 {% endif %}
             </ul>
         </nav>
     {% endif %}
-    <div class="clearfix"></div>
-    <div class="text-right text-muted">
-        Showing {{ page.start_index }}-{{ page.end_index }} of {{ total_count }}
-    </div>
+    {% if page %}
+        <div class="text-right text-muted">
+            Showing {{ page.start_index }}-{{ page.end_index }} of {{ page.paginator.count }}
+        </div>
+    {% endif %}
 </div>

netbox/templates/inc/table.html

@@ -0,0 +1,41 @@
+{% load django_tables2 %}
+
+<table{% if table.attrs %} {{ table.attrs.as_html }}{% endif %}>
+    {% if table.show_header %}
+        <thead>
+            <tr>
+                {% for column in table.columns %}
+                    {% if column.orderable %}
+                        <th {{ column.attrs.th.as_html }}><a href="{% querystring page=column.order_by_alias.next %}">{{ column.header }}</a></th>
+                    {% else %}
+                        <th {{ column.attrs.th.as_html }}>{{ column.header }}</th>
+                    {% endif %}
+                {% endfor %}
+            </tr>
+        </thead>
+    {% endif %}
+    <tbody>
+        {% for row in table.page.object_list|default:table.rows %}
+            <tr {{ row.attrs.as_html }}>
+                {% for column, cell in row.items %}
+                    <td {{ column.attrs.td.as_html }}>{{ cell }}</td>
+                {% endfor %}
+            </tr>
+        {% empty %}
+            {% if table.empty_text %}
+                <tr>
+                    <td colspan="{{ table.columns|length }}">{{ table.empty_text }}</td>
+                </tr>
+            {% endif %}
+        {% endfor %}
+    </tbody>
+    {% if table.has_footer %}
+        <tfoot>
+            <tr>
+                {% for column in table.columns %}
+                    <td>{{ column.footer }}</td>
+                {% endfor %}
+            </tr>
+        </tfoot>
+    {% endif %}
+</table>

netbox/templates/ipam/aggregate.html

@@ -1,5 +1,4 @@
 {% extends '_base.html' %}
-{% load render_table from django_tables2 %}
 
 {% block title %}Aggregate: {{ aggregate }}{% endblock %}
 

netbox/templates/ipam/aggregate_import.html

@@ -1,6 +1,4 @@
 {% extends 'utilities/obj_import.html' %}
-{% load render_table from django_tables2 %}
-{% load form_helpers %}
 
 {% block title %}Aggregate Import{% endblock %}
 

netbox/templates/ipam/ipaddress.html

@@ -1,5 +1,4 @@
 {% extends '_base.html' %}
-{% load render_table from django_tables2 %}
 
 {% block title %}{{ ipaddress }}{% endblock %}
 
@@ -133,17 +132,11 @@
         {% endwith %}
 	</div>
 	<div class="col-md-6">
-        {% with heading='Parent Prefixes' %}
-            {% render_table parent_prefixes_table 'panel_table.html' %}
-        {% endwith %}
+        {% include 'panel_table.html' with table=parent_prefixes_table heading='Parent Prefixes' %}
         {% if duplicate_ips_table.rows %}
-            {% with heading='Duplicate IP Addresses' panel_class='danger' %}
-                {% render_table duplicate_ips_table 'panel_table.html' %}
-            {% endwith %}
+            {% include 'panel_table.html' with table=duplicate_ips_table heading='Duplicate IP Addresses' panel_class='danger' %}
         {% endif %}
-        {% with heading='Related IP Addresses' %}
-            {% render_table related_ips_table 'panel_table.html' %}
-        {% endwith %}
+        {% include 'panel_table.html' with table=related_ips_table heading='Related IP Addresses' %}
 	</div>
 </div>
 {% endblock %}

netbox/templates/ipam/ipaddress_import.html

@@ -1,6 +1,4 @@
 {% extends 'utilities/obj_import.html' %}
-{% load render_table from django_tables2 %}
-{% load form_helpers %}
 
 {% block title %}IP Address Import{% endblock %}
 

netbox/templates/ipam/prefix.html

@@ -1,5 +1,4 @@
 {% extends '_base.html' %}
-{% load render_table from django_tables2 %}
 
 {% block title %}{{ prefix }}{% endblock %}
 
@@ -134,13 +133,9 @@
 	</div>
 	<div class="col-md-7">
         {% if duplicate_prefix_table.rows %}
-            {% with heading='Duplicate Prefixes' panel_class='danger' %}
-                {% render_table duplicate_prefix_table 'panel_table.html' %}
-            {% endwith %}
+            {% include 'panel_table.html' with table=duplicate_prefix_table heading='Duplicate Prefixes' panel_class='danger' %}
         {% endif %}
-        {% with heading='Parent Prefixes' %}
-            {% render_table parent_prefix_table 'panel_table.html' %}
-        {% endwith %}
+        {% include 'panel_table.html' with table=parent_prefix_table heading='Parent Prefixes' %}
 	</div>
 </div>
 <div class="row">

netbox/templates/ipam/prefix_import.html

@@ -1,6 +1,4 @@
 {% extends 'utilities/obj_import.html' %}
-{% load render_table from django_tables2 %}
-{% load form_helpers %}
 
 {% block title %}Prefix Import{% endblock %}
 

netbox/templates/ipam/prefix_ipaddresses.html

@@ -1,5 +1,4 @@
 {% extends '_base.html' %}
-{% load render_table from django_tables2 %}
 
 {% block title %}{{ prefix }}{% endblock %}
 

netbox/templates/ipam/vlan.html

@@ -1,5 +1,4 @@
 {% extends '_base.html' %}
-{% load render_table from django_tables2 %}
 
 {% block title %}VLAN {{ vlan.display_name }}{% endblock %}
 
@@ -136,7 +135,7 @@
             <div class="panel-heading">
                 <strong>Prefixes</strong>
             </div>
-            {% render_table prefix_table %}
+            {% include 'responsive_table.html' with table=prefix_table %}
             {% if perms.ipam.add_prefix %}
                 <div class="panel-footer text-right">
                     <a href="{% url 'ipam:prefix_add' %}?{% if vlan.tenant %}tenant={{ vlan.tenant.pk }}&{% endif %}site={{ vlan.site.pk }}&vlan={{ vlan.pk }}" class="btn btn-primary btn-xs">

netbox/templates/ipam/vlan_import.html

@@ -1,6 +1,4 @@
 {% extends 'utilities/obj_import.html' %}
-{% load render_table from django_tables2 %}
-{% load form_helpers %}
 
 {% block title %}VLAN Import{% endblock %}
 

netbox/templates/ipam/vrf.html

@@ -1,5 +1,4 @@
 {% extends '_base.html' %}
-{% load render_table from django_tables2 %}
 
 {% block title %}VRF {{ vrf }}{% endblock %}
 
@@ -92,7 +91,7 @@
             <div class="panel-heading">
                 <strong>Prefixes</strong>
             </div>
-            {% render_table prefix_table %}
+            {% include 'responsive_table.html' with table=prefix_table %}
         </div>
 	</div>
 </div>

netbox/templates/ipam/vrf_import.html

@@ -1,6 +1,4 @@
 {% extends 'utilities/obj_import.html' %}
-{% load render_table from django_tables2 %}
-{% load form_helpers %}
 
 {% block title %}VRF Import{% endblock %}
 

netbox/templates/panel_table.html

@@ -1,10 +1,5 @@
-{% extends 'django_tables2/table.html' %}
-{% load django_tables2 %}
-{% load i18n %}
+{% load render_table from django_tables2 %}
 
-{# Wraps a table inside a Bootstrap panel and includes custom pagination rendering #}
-
-{% block table %}
 <div class="panel panel-{{ panel_class|default:'default' }}">
     {% if heading %}
         <div class="panel-heading">
@@ -12,15 +7,14 @@
         </div>
     {% endif %}
     {% if table.rows %}
-        {{ block.super }}
+        {% render_table table 'inc/table.html' %}
     {% else %}
         <div class="panel-body text-muted">None</div>
     {% endif %}
 </div>
-{% endblock %}
 
-{% block pagination %}
-    {% if not hide_paginator %}
-        {% include 'table_paginator.html' %}
-    {% endif %}
-{% endblock pagination %}
+{% if table.rows %}
+    {% with paginator=table.paginator page=table.page %}
+        {% include 'inc/paginator.html' %}
+    {% endwith %}
+{% endif %}

netbox/templates/responsive_table.html

@@ -0,0 +1,8 @@
+{% load render_table from django_tables2 %}
+
+<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/secrets/secret_import.html

@@ -1,6 +1,5 @@
 {% extends '_base.html' %}
 {% load static from staticfiles %}
-{% load render_table from django_tables2 %}
 {% load form_helpers %}
 
 {% block title %}Secret Import{% endblock %}

netbox/templates/table.html

@@ -1,10 +0,0 @@
-{% extends 'django_tables2/bootstrap-responsive.html' %}
-{% load django_tables2 %}
-
-{# Extends the stock django_tables2 template to provide custom formatting of the pagination controls #}
-
-{% block pagination %}
-    {% if not hide_paginator %}
-        {% include 'table_paginator.html' %}
-    {% endif %}
-{% endblock pagination %}

netbox/templates/table_paginator.html

@@ -1,36 +0,0 @@
-{% load django_tables2 %}
-
-{# Custom pagination controls to render nicely with Bootstrap CSS. smart_pages requires EnhancedPaginator. #}
-
-<div class="paginator pull-right">
-    {% if table.paginator.num_pages > 1 %}
-        <nav>
-            <ul class="pagination pull-right">
-                {% if table.page.has_previous %}
-                    <li><a href="{% querystring table.prefixed_page_field=table.page.previous_page_number %}"><i class="fa fa-angle-double-left"></i></a></li>
-                {% endif %}
-                {% for p in table.page.smart_pages %}
-                    {% if p %}
-                        <li{% ifequal table.page.number p %} class="active"{% endifequal %}><a href="{% querystring table.prefixed_page_field=p %}">{{ p }}</a></li>
-                    {% else %}
-                        <li class="disabled"><span>&hellip;</span></li>
-                    {% endif %}
-                {% endfor %}
-                {% if table.page.has_next %}
-                    <li><a href="{% querystring table.prefixed_page_field=table.page.next_page_number %}"><i class="fa fa-angle-double-right"></i></a></li>
-                {% endif %}
-            </ul>
-        </nav>
-    {% endif %}
-    <div class="clearfix"></div>
-    <div class="text-right text-muted">
-        {% with table.page.paginator.count as total %}
-            Showing {{ table.page.start_index }}-{{ table.page.end_index }} of {{ total }}
-            {% if total == 1 %}
-                {{ table.data.verbose_name }}
-            {% else %}
-                {{ table.data.verbose_name_plural }}
-            {% endif %}
-        {% endwith %}
-    </div>
-</div>

netbox/templates/tenancy/tenant_import.html

@@ -1,6 +1,4 @@
 {% extends 'utilities/obj_import.html' %}
-{% load render_table from django_tables2 %}
-{% load form_helpers %}
 
 {% block title %}Tenant Import{% endblock %}
 

netbox/templates/utilities/obj_import.html

@@ -1,5 +1,4 @@
 {% extends '_base.html' %}
-{% load render_table from django_tables2 %}
 {% load form_helpers %}
 
 {% block content %}

netbox/templates/utilities/obj_table.html

@@ -1,4 +1,3 @@
-{% load render_table from django_tables2 %}
 {% load helpers %}
 {% if permissions.change or permissions.delete %}
     <form method="post" class="form form-horizontal">
@@ -28,7 +27,7 @@
                 </div>
             </div>
         {% endif %}
-        {% render_table table table_template|default:'table.html' %}
+        {% 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">
@@ -42,6 +41,6 @@
         {% endif %}
     </form>
 {% else %}
-    {% render_table table table_template|default:'table.html' %}
+    {% include table_template|default:'responsive_table.html' %}
 {% endif %}
 <div class="clearfix"></div>