jquery - 쿼리 셋의 처음 몇 항목을 렌더링 한 다음 ajax를 통해 더 많은 항목을로드하십시오

Comment 의 처음 5 개의 주석을 렌더링하고 싶습니다  queryset. 하지만 사용자가 버튼을 클릭하면 다음 20 개의 댓글을로드 할 수 있기를 원합니다.

조회수

def article(request, category, id):
    name = resolve(request.path).kwargs['category']
    instance = get_object_or_404(Post, id=id, entered_category=name)
    #comments
    current_page = int(request.GET.get('page_val', '1'))
    page_size = 5
    limit = page_size * current_page
    offset = limit - page_size
    new_comments_list = Comment.objects.filter(destination=id, parent_id=0).order_by('-timestamp')[offset:limit]
    counts = new_comments_list.count()
    total_pages = counts / page_size
    if counts % page_size != 0:
        total_pages += 1
    is_last = True if current_page >= total_pages else False
    comment_list = Comment.objects.filter(parent_id=0, post=post).order_by('-score__upvotes')[:2]
    context = {
        'id': id,
        'comment_list': new_comments_list,
        'is_last': is_last,
        'instance': instance,
    }
    if request.is_ajax():
        if new_comments_list:
            return render(request, 'list_ajax.html', context)
        else:
            return HttpResponse('last')
    return render(request, 'article.html', context)

comments_base.html

<div class="commentsContainer">
    {% include 'comments.html' %}
    #I can append the new comments here
    <p class="more_comments">more comments</p>
</div>

comments.html

{% block comments %}
    {% for i in comment_list %}
        {% if i.parent_comment %}
            <div class="comment_shell hasParent">
         {% else %}
            <div>
        {% endif %}
        <div class='comment_div' data-comment_id="{{ i.id }}">
            <div class="left_comment_div">
                <div class="username_and_votes">
                    <h3><a class='username_foreign'>{{ i.user }}</a></h3>
                    {% for j in i.score.all %}
                        <span class="upvotes">{{ j.upvotes }}</span>
                        <span class="downvotes">{{ j.downvotes }}</span>
                    {% endfor %}
                </div>
                <br>
                <p>{{ i.comment_text }}</p>
            </div>
        </div>
        {% include 'comments.html' with comment_list=i.replies.all %}
    </div>
    {% endfor %}

{% endblock %}

내 의견에서 볼 수 있듯이 처음 5 개의 의견 만받습니다. 이렇게하면 (AJAX를 통해) 다음 20 개의 쿼리 세트 항목을로드 할 수있는 방법이 있습니까? 또는 처음에 전체 쿼리 세트를로드해야하지만 처음 5 개만 표시해야합니까 (jquery를 통해 나머지는 숨기십시오)? 그런 다음 jquery를 통해 다음 20 개의 주석을로드 하시겠습니까? 아니면 실행 가능하지 않습니까? 추천 감사합니다.

수정 : 전체 코드를 추가했습니다.