Question

我想使用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);
        });
    });
});

Answer 1

好的， 自动解决 ;修改必须如下：

<强> 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 %}
            <button onclick="getPage({{ products.previous_page_number }})">previous</button>
        {% endif %}

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

        {% if products.has_next %}
            <button onclick="getPage({{ products.next_page_number }})">next</button>
        {% 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").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);
    });
}

数据分页在同一页面上

1 个答案: