Merge pull request raksha-life#35 from vigneshhari/master

Added Pagination Numbers
rakesh-gopal · Aug 16, 2018 · f9276f1 · f9276f1
2 parents 0897083 + 86e0ad7
commit f9276f1
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/mainapp/templates/mainapp/request_list.html b/mainapp/templates/mainapp/request_list.html
@@ -37,9 +37,13 @@
             <a href="?page={{ data.previous_page_number }}&district={{ request.GET.district }}">previous</a>
         {% endif %}
 
-        <span class="current">
-            Page {{ data.number }} of {{ data.paginator.num_pages }}.
-        </span>
+        {% for i in data.paginator.page_range %}
+        {% if data.number == i %}
+          <a class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></a>
+        {% else %}
+          <a href="?page={{ i }}&district={{ request.GET.district }}">{{ i }}</a>
+        {% endif %}
+      {% endfor %}
 
         {% if data.has_next %}
             <a href="?page={{ data.next_page_number }}&district={{ request.GET.district }}">next</a>

diff --git a/static/css/style.css b/static/css/style.css
@@ -158,3 +158,30 @@ tr:hover td{
     padding:20px 20px 50px;
     border: 2px solid #CCCCCC;
 }
+
+.center {
+    text-align: center;
+}
+
+.pagination {
+    display: inline-block;
+}
+
+.pagination a {
+    color: black;
+    float: left;
+    padding: 8px 16px;
+    text-decoration: none;
+    transition: background-color .3s;
+    border: 1px solid #ddd;
+    margin: 0 4px;
+}
+
+.pagination a.active {
+    background-color: #1C608C;
+    color: white;
+    border: 1px solid #1C608C;
+}
+
+.pagination a:hover:not(.active) {background-color: #ddd;}
+