django paginator, i wuv you

itf/erang_organised/views.py

@@ -7,6 +7,8 @@ from django.http import HttpResponse
 from django.core.mail import send_mail
 from django.db.models import Q
 from oxdjango.shortcuts import render_to_json_response
+from django.core.paginator import Paginator, InvalidPage, EmptyPage
+
 
 RESULTS_PER_PAGE = 3
 
@@ -26,7 +28,11 @@ def home(request):
 
 def issue_list(request):
   p = RESULTS_PER_PAGE
-  start_no = int(request.GET.get("start", 0))
+  try:
+    page_no = int(request.GET.get("page", '1'))
+  except ValueError:
+    page_no = 1
+
 #  print start_no
   search_terms = request.GET.get("search", "")
 #  print search_terms
@@ -35,23 +41,24 @@ def issue_list(request):
   else:
     qset = Issue.objects.all()
 
-  hasPrev = (int(start_no) > 0)
+  paginator = Paginator(qset, p)
-  hasNext = ((start_no + p + p) <= qset.count())
   
-  if qset.count() < (start_no + p):
+  try:
-    p = qset.count() - start_no
+    results = paginator.page(page_no)
+  except (EmptyPage, InvalidPage):
+    results = paginator.page(paginator.num_pages)
 
   issues = []
-  for q in qset[start_no:start_no + p]:
+  for r in results.object_list:
-    d = q.get_dict()
+    d = r.get_dict()
     issues.append(d)
 
   return render_to_json_response({
-    'hasPrev': hasPrev,
+    'hasPrev': results.has_previous(),
-    'hasNext': hasNext,
+    'hasNext': results.has_next(),
     'issues': issues,
-    'end_no': start_no + p,
+    'page_no': page_no,
-    'page_size': RESULTS_PER_PAGE
+    'search_terms': search_terms
   })
      
 

itf/static/css/erang/erang.css

@@ -8,6 +8,15 @@
     margin-top: 40px;
   }
 
+  #issueSearch {
+    width: 130px;
+  }
+
+  #searchSubmit {
+    margin-left: 5px;
+    width: 50px;
+  }
+
   .validation {
   font-size: 12px;
   color: #f00;

itf/static/js/erang/erang.js

@@ -31,7 +31,7 @@ var Issue = function(json) {
 
 function renderIssues(data) {
   var html = tmpl("tmpl_issue_list", data);
-  console.log(html);
+//  console.log(html);
   $('.issueListContainer').html(html);
 /*
   var hasNext = data.hasNext;
@@ -46,18 +46,48 @@ $(document).ready(function() {
   $.getJSON("issue_list/", {}, function(data) {
     renderIssues(data);  
   });
+  
+  $('#searchForm').submit(function(e) {
+    e.preventDefault();
+    var searchInput = $('#issueSearch');
+    var search_terms = searchInput.val();
+    if (search_terms == '' || search_terms == searchInput.data("placeholder")) {
+      return false;
+    }
+    doIssuesLoading();
+    $.getJSON("issue_list/", {'search': search_terms}, function(data) {
+      renderIssues(data);
     });
+  });
+
+});
+
+function loadIssues(parentElem, page_no) {
+  var search_terms = parentElem.data("terms");
+  var params = {};
+  params['page'] = page_no;
+  //sets get var to search if search_terms is not empty string, otherwise sets to undefined.
+  params['search'] = search_terms == '' ? undefined : search_terms;
+//  console.log(start);
+  doIssuesLoading();
+  $.getJSON("issue_list/", params, function(data) {
+    renderIssues(data);
+  }); 
+}
 
 $('.nextBtn').live("click", function() {
 //  console.log("clicked next");
-  var start = $(this).parents('.navBtns').data("end");
+  var parentElem = $(this).closest(".navBtns");
-  console.log(start);
+  var curr_page = parseInt(parentElem.data("page"));
-  doIssuesLoading();
+  var next_page = curr_page + 1;
-  
+  loadIssues(parentElem, next_page);
-//FIXME: handle search
-  $.getJSON("issue_list/", {'start': start}, function(data) {
-    renderIssues(data);
 });
+
+$('.prevBtn').live("click", function() {
+  var parentElem = $(this).closest(".navBtns");
+  var curr_page = parseInt(parentElem.data("page"));
+  var prev_page = curr_page - 1;
+  loadIssues(parentElem, prev_page);
 });
 
 function doIssuesLoading() {

itf/templates/erang/home.html

@@ -18,7 +18,7 @@
       </li>
     <% } %>
   </ul>
-  <div class="navBtns" data-pagesize="<%= page_size %>" data-end="<%= end_no %>">
+  <div class="navBtns" data-terms="<%= search_terms %>" data-page="<%= page_no %>">
     <% if (hasPrev) { %><span class="prevBtn">Prev</span><% } %>
     <% if (hasNext) { %><span class="nextBtn">Next</span><% } %>
   </div>
@@ -29,7 +29,9 @@
       <h3><img src="/static/images/favicon.ico" title="India Theatre Forum" alt="" /> <a href="/" title="India Theatre Forum Home">&nbsp;Home</a> </h3>
     </div>
     <h3>Past Issues:</h3>
-    <input id="issueSearch" data-placeholder="Search" />
+    <form id="searchForm" action="" method="get" />
+      <input id="issueSearch" data-placeholder="Search" /><input id="searchSubmit" type="submit" value="Go" />
+    </form>
     <div class="issueListContainer">
     </div>
     <div id="subscribe">