如何在Django应用程序中加载更多内容？ [英] How to load more content in django application?

问题描述

我已经开发了用于在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.

示例： https://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();
    }
});  

这篇关于如何在Django应用程序中加载更多内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！