javascript - 使用 Django Paginate 重复查询集的 Django 无限滚动
问题描述
简介:我正在使用以下链接为我的项目添加无限滚动https://simpleisbetterthancomplex.com/tutorial/2017/03/13/how-to-create-infinite-scroll-with-django.html
下面是该链接的 github 代码 https://github.com/sibtc/simple-infinite-scroll
该链接显示了如何将无限滚动添加到function based views
和class based views
。我已将此添加到基于函数的视图中,并且效果很好。
问题:我的帖子列表中有8 个帖子,它们是class-based view
. 添加后,paginate_by = 3
我只能看到 8 个帖子中的 3 个帖子。每次我向下滚动这 3 个帖子时,都会无限循环地重复
我的观点:
class Postlist(SelectRelatedMixin, ListView):
model = Post
select_related = ('user', 'group')
paginate_by = 3
context_object_name = 'post_list'
template_name = 'posts/post_list.html'
def get_queryset(self):
queryset = super(Postlist, self).get_queryset().order_by('-created_at')
query = self.request.GET.get('q')
if query:
queryset = queryset.filter(
Q(title__icontains=query)|
Q(user__username__iexact=query)|
Q(user__first_name__iexact=query)|
Q(user__last_name__iexact=query)
)
return queryset
我的 Base.html:(我在 JS 文件夹中有以下文件,它们为我的 FBV 工作)
<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/infinite.min.js' %}"></script>
{% block javascript %}{% endblock %}
我的 post_list.html:
<div class="col-md-8">
<div class="infinite-container">
{% for post in post_list %}
<div class="infinite-item">
{% include "posts/_post.html" %} <!---This code is good---->
</div>
{% empty %}
some code
{% endfor %}
</div>
<div class="loading" style="display: none;">
Loading...
</div>
{% if page_obj.has_next %}
<a class="infinite-more-link" href="?page={{ post_list.next_page_number }}">More</a>
{% endif %}
</div>
{% block javascript %}
<script>
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0],
onBeforePageLoad: function () {
$('.loading').show();
},
onAfterPageLoad: function ($items) {
$('.loading').hide();
}
});
</script>
{% endblock %}
解决方案
在我替换的模板post_list
中,page_obj
请参见下面的代码。做到了
{% if post_list.has_next %}
<a class="infinite-more-link" href="?page={{page_obj.next_page_number }}">More</a>
{% endif %}
推荐阅读
- python - py manage.py 运行服务器在 vscode 编辑器中不起作用
- linux - 将文件移动到另一个目录中的目录并在一个命令行中重命名它?
- reactjs - React - 将 TextArea 值设置为 HTML
- java - Spring Boot,在 Heroku 免费计划上执行预定方法
- phpstorm - PhpStorm 接口上不报告 Phpcs
- pyspark - 使用 pyspark 合并关于日期(日期和期间)的两个表
- python - 如何使用 VGG16(pytorch)和自定义数据集创建预训练权重
- android - 使用 notifyDataSetChanged 在 setData() 之后 RecyclerView 未更新大小
- excel - 使用 Powershell 将数据格式化为 Excel 表格
- curl - Argo 工作流 curl 不返回 http 代码