如何在Django应用程序中加载更多内容？

本文介绍了如何在Django应用程序中加载更多内容？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我已经开发了用于在django应用程序中查看组列表的模板。我知道的是，经过更多的分组之后，页面向下滚动。我看不到组的所有名称。我也想在开始时仅查看4个组名，然后单击加载更多按钮后，必须显示接下来的4个组。我无法做到这一点。

I have developed template for viewing the group list in my django application. What I came to know is that, after more groups, the page is scrolling down. I am unable to see all the names of the groups. And also I want to view only 4 group names on the starting and then after clicking load more button, next 4 groups have to be shown. I am unable to do this.

{% extends "groups/group_base.html" %} {% block pregroup %} <div class="col-md-4"> <div class="content"> {% if user.is_authenticated %} <h2> Welcome back <a href="{% url 'posts:for_user' username=user.username %}">@{{user.username }}</a> </h2> {% endif %} <h2>Groups</h2> <p>Welcome to the Groups Page! Select a Group with a shared interest!</p> </div> {% if user.is_authenticated %} <a href="{% url 'groups:create' %}" class="btn btn-md btn-fill btn-warning"><span class="glyphicon glyphicon-plus-sign"></span> Create New Group!</a> {% endif %} </div> {% endblock %} {% block group_content %} <div class="col-md-8"> <div class="list-group"> {% for group in object_list %} <a class="list-group-item" href="{% url 'groups:single' slug=group.slug %}"> <h3 class="title list-group-item-heading">{{ group.name }}</h3> <div class="list-group-item-text container-fluid"> {{ group.description_html|safe }} <div class="row"> <div class="col-md-4"> <span class="badge">{{ group.members.count }}</span> member{{ group.members.count|pluralize }} </div> <div class="col-md-4"> <span class="badge">{{ group.posts.count }}</span> post{{ group.posts.count|pluralize }} </div> </div> </div> </a> {% endfor %} </div> </div> {% endblock %}

我想在此页面上添加滚动选项。怎么做？分页可能是一种解决方案。但是我想在同一页面上加载列表。

I want to add scrolling option to this page. How to do that? Pagination could be a solution. But i want to load list on the same page itself.

推荐答案

1。将object_list解析为JSON对象：这应该允许您为客户端提供存在的所有组，以实现使用户保持在同一页面上的目标。

1. Parse the object_list into a JSON object: This should allow you to provide the client with all the groups that exist in order to achieve your goal to keep the user on the same page.

2。使用jQuery或Javascript刷新具有列出的组的html容器：根据数据的大小和类型，您还可以编写一个新视图，将过滤后的JSON对象返回给Javascript中的post方法。

2. Use jQuery or Javascript to refresh your html container that has the groups listed: Based on the size and type of data, you can also write a new view that returns a filtered JSON object to a post method in Javascript.

示例： codepen.io/elmahdim / pen / sGkvH

/* Load more content with jQuery - May 21, 2013 (c) 2013 @ElmahdiMahmoud */ $(function () { $("div").slice(0, 4).show(); $("#loadMore").on('click', function (e) { e.preventDefault(); $("div:hidden").slice(0, 4).slideDown(); if ($("div:hidden").length == 0) { $("#load").fadeOut('slow'); } $('html,body').animate({ scrollTop: $(this).offset().top }, 1500); }); }); $('a[href=#top]').click(function () { $('body,html').animate({ scrollTop: 0 }, 600); return false; }); $(window).scroll(function () { if ($(this).scrollTop() > 50) { $('.totop a').fadeIn(); } else { $('.totop a').fadeOut(); } });