如何在Djang中使用无限滚动保持页面重新加载后的位置

Question

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

1. 首先，我想在页面重新加载后保留位置。在
2. 另外，最好添加固定的分页栏，可以在滚动时动态显示当前页面。我添加了一个，但是如何动态显示你的位置。这意味着，我每页有20个对象，当向下滚动20个对象时，它应该自动将当前页面切换为分页栏上的第二个对象。反之亦然。在
3. 另一个问题是，在我当前的分页菜单中选择精确页面时，它会打开带有链接“http://127.0.0.1:8000/?page=2”的单独页面，并且只显示第41到60位的对象。我需要它打开确切的页面，但有可能上下滚动上下页。哪种方法可以做到这一点？在

下面是我的代码。在

模型.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)

视图.py

^{pr2}$

网址.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'))
]

索引.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' %}

我现在所拥有的

在“分页”菜单中选择“精确页面”将打开单独的页面