Question

我使用jQuery和Waypoints为我的数据对象实现了无限滚动。工作正常，但我想让它更方便。

首先，我正在寻找一种在页面重新加载后保留位置的方法。
也可以添加固定的分页栏，以便在滚动时动态显示您的页面。我已添加一个，但如何动态显示您的位置。意思是，我每页有20个对象，当向下滚动20个时，它应该自动切换分页栏上的第二个当前页面。滚动起来反之亦然。
另一个问题是，在我当前的分页菜单中选择确切的页面时，它会打开单独的页面，例如链接“http://127.0.0.1:8000/?page=2”，并且仅显示第41到第60个对象。我需要它打开确切的页面，但有可能上下滚动上一页和下一页。哪种方式可以做到这一点？

以下是我的代码。

models.py

from django.core.validators import MinValueValidator, MaxValueValidator
from django.db import models


class Bancnote(models.Model):
    type = models.CharField(max_length=11)
    par = models.PositiveIntegerField()
    year_from = models.PositiveIntegerField()
    year_to = models.PositiveIntegerField()
    size = models.CharField(max_length=7)
    sign = models.CharField(max_length=20)
    desc = models.TextField(max_length=200)
    image = models.ImageField(upload_to='bons_images')

    def __str__(self):
        return str(self.par) + ' ' + self.type + ' ' + str(self.year_from) + '-' + str(self.year_to)

views.py

from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage
from django.shortcuts import render, render_to_response
from django.template import RequestContext
from django.views import generic

from catalogue.models import Bancnote


def index(request):
    bons_list = Bancnote.objects.all().order_by('par')
    page = request.GET.get('page', 1)
    paginator = Paginator(bons_list, 20)
    try:
        bons = paginator.page(page)
    except PageNotAnInteger:
        bons = paginator.page(1)
    except EmptyPage:
        bons = paginator.page(paginator.num_pages)
    return render(request, 'catalogue/index.html', {'bons': bons})


def image(request):
    bons = Bancnote()
    variables = RequestContext(request, {
        'bons': bons
    })
    return render_to_response('catalogue/bon_detail.html', variables)

urls.py

from django.conf.urls import url
from django.views.generic import DetailView

from catalogue import views
from catalogue.models import Bancnote

urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^(?P<pk>\d+)$', DetailView.as_view(model=Bancnote, template_name='catalogue/bon_detail.html'))
]

的index.html

{% extends 'catalogue/base.html' %}
{% block title %}Catalogue{% endblock %}

{% include  'catalogue/includes/header.html'%}

{% block content %}
    {% if bons %}
        <div class="container-fluid infinite-container">
            <div class="row infinite-item">
                {% for bon in bons %}
                    {% if forloop.counter0|divisibleby:"4" %}
            </div>
                        <div class="row infinite-item">
                    {% endif %}
                    <div class="col-sm-3 col-lg-3">
                        <div style="display: block; text-align: center; margin: 0 auto">
                            <a href="{{ bon.id }}">
                                <img src="{{ bon.image.url }}" style="width: 50%; height: 50%"/>
                                <h5>{{ bon.par }} {{ bon.type }} {{ bon.year_from}}-{{ bon.year_to }}</h5>
                            </a>
                        </div>
                    </div>
                {% endfor %}
                        </div>
        </div>

        {% if bons.has_next %}
            <a class="infinite-more-link" href="?page={{ bons.next_page_number }}">More</a>
        {% endif %}

        <div class="loading" style="display: none;">
            Loading...
        </div>

        {% if bons.has_other_pages %}
            <div style="position:fixed; left: 50%; top: 93%;">
                <ul class="pagination" id="pag">
                {% if bons.has_previous %}
                    <li><a href="?page={{ bons.previous_page_number }}">&laquo;</a></li>
                {% else %}
                    <li class="disabled"><span>&laquo;</span></li>
                {% endif %}
                {% for i in bons.paginator.page_range %}
                    {% if bons.number == i %}
                        <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
                    {% else %}
                        <li><a href="?page={{ i }}">{{ i }}</a></li>
                    {% endif %}
                {% endfor %}
                {% if bons.has_next %}
                    <li><a href="?page={{ bons.next_page_number }}">&raquo;</a></li>
                {% else %}
                    <li class="disabled"><span>&raquo;</span></li>
                {% endif %}
                </ul>
            </div>
        {% endif %}

        <script>
            var infinite = new Waypoint.Infinite({
                element: $('.infinite-container')[0],
                onBeforePageLoad: function () {
                    $('.loading').show();
                },
                onAfterPageLoad: function ($items) {
                    $('.loading').hide();
                }
            });
        </script>

    {% endif %}
{% endblock %}

{% include 'catalogue/includes/footer.html' %}

我现在拥有的

在分页菜单中选择确切页面会打开单独的页面

如何在Django

0 个答案: