홈>2020-02-26 08:33

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 개의 주석을로드 하시겠습니까? 아니면 실행 가능하지 않습니까? 추천 감사합니다.

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

jquerypythonajaxdjango

답변 # 1

목표를 달성하기 위해 커스텀 페이지 매김 로직을 수행해야합니다. 먼저 페이지 매김 로직을 수행하고 페이지 값에 대한 오프셋과 한계를 만듭니다.이 로직의 기능은 django의 내장 메소드를 사용하여 ajax를 통해 데이터를 추가하는 동일한 기능을 사용하는 것입니다. strong>request.is_ajax ()

def yourview(request):
    current_page = int(request.GET.get('page_val', '1'))
    page_size = settings.PAGE_SIZE_WEB (replace with your number e.g 5)
    limit = page_size * current_page
    offset = limit - page_size
    new_comments_list = Comment.objects.all()[offset:limit] #your query will return data accrodign page size and page no
    counts = Comment.objects.all().count()
    total_pages = counts / page_size
    if counts % page_size != 0:
        total_pages += 1
    is_last = True if current_page >= total_pages else False
    context = { 
           "new_comments_list":new_comments_list,
           "is_last":is_last  
      }
    if request.is_ajax():
        if new_comments_list:
            return render(request, 'comments.html', context)
        else:
            return HttpResponse('last')
    return render(request, 'article.html', context)

템플릿에서 의견을 추가 할 수있는 div를 정의하십시오. article.html

<div class="comment-div">
  {% include 'comments.html' with is_last=is_last comment_list = comment_list %}  <!-- first time it will be loaded with page no 1 and when you call jquery it will be loaded with respective page number. -->
</div>
 <input type="hidden" id="page_val" value="2" /> <!-- setting page no according jquery calls ( by default it will be 2 for getting next comment data ) -->

comments.html파일

{% for i in comment_list %}
    {{ i }}
{% endfor %}

jquery 로직을 수행하여 데이터를 추가하십시오. yourfilename.js

$(body).on('click','#append_data',function(){
      var page_val = $('#page_val').val();
      $.ajax({
        url: "/yoururl",
        type: "GET",
        data: {"page_val":page_val},
        success: function (data) {
            if (data != "last") {
                page_val++;
                $('#page_val').val(page_val); #need to increment page no to get incremented number to get next page data
                #append your data on comment-div
            }
            else if (data == "last" ) {
                #hide show more comments
             }
        })
})

답변 # 2
기사에 대한 의견을 반환하는 새로운보기 기능을 만든 다음 django-el-pagination 앱을 사용하여 모든 것이 효과가있는 것을 추천합니다.

Python2.net

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

관련 자료