2013-02-27 36 views
0

我想使用Django分页对分页中的行进行分页,但使用Ajax和JQuery保留在同一页上。 我可以正确显示检索到的数据的第一页,但浏览页面的链接不起作用。 我知道我粘贴了很多代码,但我没有在互联网上找到一个完整的工作示例,所以我希望能在这里找到一个。你能帮我吗?提前致谢。在同一页上的数据分页

使用Django pagination docs,我已经做了迄今为止以下内容:

urls.py

from django.conf.urls.defaults import * 
from django.contrib.auth.views import login, logout 

urlpatterns = patterns('gomos.views', 
    url(r'^$', login, name='login'), 
    url(r'^out', logout, {'next_page': '/gomos'}, name='logout'), 
    url(r'^main', 'index', name='main'), 
    (r'^getGomosProducts', 'getGomosProducts'), 
) 

views.py

from django.contrib.auth import authenticate, login, logout 
from django.contrib.auth.views import logout_then_login 
from django.contrib.auth.decorators import login_required 
from django.http import HttpResponse, HttpResponseRedirect, HttpRequest 
from django.core.urlresolvers import reverse 
from gomos.models import * 
from django.shortcuts import render_to_response 
from django.template import RequestContext 
from decimal import * 
import datetime 
from django.utils.timezone import utc 
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger 

@login_required 
def index(request): 
    return render_to_response('gomos/index.html', 
           {}, 
           context_instance=RequestContext(request)) 

@login_required 
def getGomosProducts(request): 
    get = request.GET 
    startDate = get['startDate'] 
    stopDate = get['stopDate'] 

    startY = Decimal(startDate[:4]) 
    startM = Decimal(startDate[5:-3]) 
    startD = Decimal(startDate[-2:]) 

    stopY = Decimal(stopDate[:4]) 
    stopM = Decimal(stopDate[5:-3]) 
    stopD = Decimal(stopDate[-2:]) 

    start = datetime.datetime(startY, startM, startD, tzinfo=utc) 
    stop = datetime.datetime(stopY, stopM, stopD, tzinfo=utc) 

    productList = GomosFiles.objects.filter(prod_date__range=(start, stop)).all() 

    paginator = Paginator(productList, 30) 

    page = request.GET.get('page') 
    try: 
     products = paginator.page(page) 
    except PageNotAnInteger: 
     products = paginator.page(1) 
    except EmptyPage: 
     products = paginator.page(paginator.num_pages) 

    return render_to_response('gomos/prodList.html', 
           {'products': products}, 
           context_instance=RequestContext(request)) 

的index.html

{% extends "base.html" %} 
{% block header %} 
{% load url from future %} 
<div id="idLogOutDiv" class="logOutDiv"> 
    <form id="idLogOutForm" action="{% url 'logout' %}" method="post">{% csrf_token %} 
     <span id="welcomeUserId" class="welcomeUserClass">Welcome, <strong>{{ user.username }}</strong></span> 
     <button id="idLogOutSubmit" name="idLogOutSubmit" type="submit">Logout</button> 
    </form> 
</div> 
{% endblock header %} 

{% block content %} 
<span>From <input type="text" id="fromDatePicker" /></span> 
<span>to <input type="text" id="toDatePicker" /></span> 
<button type="button" id="searchBut">Search</button> 

<div id="prodList"></div> 
{% endblock content %} 

prodList.html

{% for prod in products %} 
    <span id="prod-id-{{ prod.id }}">{{ prod.id }}</span> 
    <span id="prod-name-{{ prod.id }}">{{ prod.file_name }}</span></br> 
{% endfor %} 

<div class="pagination"> 
    <span class="step-links"> 
     {% if products.has_previous %} 
      <a class="prev" href="getGomosProducts?page={{ products.previous_page_number }}">previous</a> 
     {% endif %} 

     <span class="current"> 
      Page {{ products.number }} of {{ products.paginator.num_pages }}. 
     </span> 

     {% if products.has_next %} 
      <a href="getGomosProducts?page={{ products.next_page_number }}">next</a> 
     {% endif %} 
    </span> 
</div> 

utils.js

$(document).ready(function(){ 
    $("#searchBut").click(function(){ 

     if($("#fromDatePicker").val() == "") 
      $("#fromDatePicker").datepicker("setDate", minDate); 

     if($("#toDatePicker").val() == "") 
      $("#toDatePicker").datepicker("setDate", maxDate); 

     var request = $.ajax({ 
      type: "get", 
      url: "getGomosProducts", 
      data:{ 
       'startDate': $("#fromDatePicker").val(), 
       'stopDate': $("#toDatePicker").val() 
      } 
     }); 
     request.done(function(prodList){ 
      $("#prodList").append(prodList); 
     }); 
    }); 
}); 

回答

1

好吧,自动解决;修改必须是以下:

prodList.html

​​

utils.js

$(document).ready(function(){ 
    $("#searchBut").click(function(){ 

     if($("#fromDatePicker").val() == "") 
      $("#fromDatePicker").datepicker("setDate", minDate); 

     if($("#toDatePicker").val() == "") 
      $("#toDatePicker").datepicker("setDate", maxDate); 

     var request = $.ajax({ 
      type: "get", 
      url: "getGomosProducts", 
      data:{ 
       'startDate': $("#fromDatePicker").val(), 
       'stopDate': $("#toDatePicker").val() 
      } 
     }); 
     request.done(function(prodList){ 
      $("#prodList").html(prodList); 
     }); 
    }); 
}); 

function getPage(page){ 
    var request = $.ajax({ 
     type: "get", 
     url: "getGomosProducts", 
     data:{ 
      'startDate': $("#fromDatePicker").val(), 
      'stopDate': $("#toDatePicker").val(), 
      'page': page 
     } 
    }); 

    request.done(function(prodList){ 
     $("#prodList").html(prodList); 
    }); 
}