Links for navigating over pages

html/dictionary.html

@@ -11,6 +11,8 @@
 {% block content %}
 
 
+{% if words.object_list %}
+
 <table>
 <thead>
 <tr>
@@ -30,4 +32,22 @@
 </tbody>
 </table>
 
+<ul class="pages">
+{% if words.has_previous %}
+<li><a href="?page={{ words.previous_page_number }}">&laquo;</a></li>
+{% else %}
+<li class="disabled"><span>&laquo;</span></li>
+{% endif %}
+{% for page in words.paginator.page_range %}
+<li {% ifequal page words.number %} class="active" {% endifequal %}><a href="?page={{ page }}&{{ urlparams }}">{{ page }}</a></li>
+{% endfor %}
+{% if words.has_next %}
+<li><a href="?page={{ words.next_page_number }}">&raquo;</a></li>
+{% else %}
+<li class="disabled"><span>&raquo;</span></li>
+{% endif %}
+</ul>
+{% endif %}
+
+
 {% endblock %}

media/css/style.css

@@ -126,3 +126,23 @@ ins {
 del {
     background-color: #fc7979;
 }
+ul.pages {
+    display: block;
+    list-style: none;
+    margin: 0.5em;
+    padding: 1em;
+}
+ul.pages li {
+    display: inline-block;
+}
+ul.pages li a {
+    padding: 0.2em;
+    border: 1px solid #333;
+}
+ul.pages li.active a {
+    font-weight: bolder;
+}
+ul.pages li.disabled span {
+    padding: 0.2em;
+    border: 1px solid #333;
+}