Include pagination control in browsable API

2 files changed, 36 insertions, 0 deletions

diff --git a/rest_framework/templates/rest_framework/base.html b/rest_framework/templates/rest_framework/base.html
index e9668193..e0030981 100644
--- a/rest_framework/templates/rest_framework/base.html
+++ b/rest_framework/templates/rest_framework/base.html
@@ -119,9 +119,18 @@
                     <div class="page-header">
                         <h1>{{ name }}</h1>
                     </div>
+                    <div style="float:left">
                     {% block description %}
                         {{ description }}
                     {% endblock %}
+                    </div>
+
+                    {% if pager.mark_as_used %}
+                        <nav style="float: right">
+                        {% get_pagination_html pager %}
+                        </nav>
+                    {% endif %}
+
                     <div class="request-info" style="clear: both" >
                         <pre class="prettyprint"><b>{{ request.method }}</b> {{ request.get_full_path }}</pre>
                     </div>
diff --git a/rest_framework/templates/rest_framework/pagination/numbers.html b/rest_framework/templates/rest_framework/pagination/numbers.html
new file mode 100644
index 00000000..04045810
--- /dev/null
+++ b/rest_framework/templates/rest_framework/pagination/numbers.html
@@ -0,0 +1,27 @@
+<ul class="pagination" style="margin: 5px 0 10px 0">
+    {% if previous_url %}
+        <li><a href="{{ previous_url }}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
+    {% else %}
+        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
+    {% endif %}
+
+    {% for page_link in page_links %}
+        {% if page_link.is_break %}
+            <li class="disabled">
+                <a href="#"><span aria-hidden="true">&hellip;</span></a>
+            </li>
+        {% else %}
+            {% if page_link.is_active %}
+                <li class="active"><a href="{{ page_link.url }}">{{ page_link.number }}</a></li>
+            {% else %}
+                <li><a href="{{ page_link.url }}">{{ page_link.number }}</a></li>
+            {% endif %}
+        {% endif %}
+    {% endfor %}
+
+    {% if next_url %}
+        <li><a href="{{ next_url }}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
+    {% else %}
+        <li class="disabled"><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
+    {% endif %}
+</ul>