jQuery와 Django pagation을 사용하여 데이터의 페이지를 추가하는 방법?

jQuery와 Django pagation을 사용하여 데이터의 페이지를 추가하는 방법?

장고의 내장을 사용하고 있습니다.pagination데이터를 페이지화하고 템플릿에 표시합니다.이제 jQuery를 구현하여 ajax를 사용하여 템플릿에 페이지를 로드하고 추가하고자 합니다.jQuery를 사용해서 어떻게 합니까?

예전에 django-endless-pagation을 사용하고 있었는데 자바스크립트로 엔트리를 추가하기 때문에 이미지를 표시하는 라이트박스가 이미지 요소를 잡지 못하고 처음 요청할 때 로드된 엔트리만 표시합니다.

views.py :

def snaps(request):
    snapgroup_list = SnapGroup.objects.all()
    paginator = Paginator(snapgroup_list, 1)

    try:
        page = int(request.GET.get('page', '1'))
    except:
        page = 1
    try:
        snapgroup = paginator.page(page)
    except(EmptyPage, InvalidPage):
        snapgroup = paginator.page(page)

    index = snapgroup.number - 1  # edited to something easier without index
    max_index = len(paginator.page_range)
    start_index = index - 3 if index >= 3 else 0
    end_index = index + 3 if index <= max_index - 3 else max_index
    page_range = paginator.page_range[start_index:end_index]

    return render(request, 'snaps.html', {
        'page_range': page_range,
        'snapgroup':snapgroup
        })

snaps.snaps:

{% extends "base.html" %}
{% block main_content %}

<div id="main_content">
    <div id="snap_wrapper" class="container">
        <hr>
        {% if snapgroup.object_list.count > 0 %} 
            {% include 'snapgroups.html' %}
        {% else %}
            <li><p>No SNAPS yet!</p></li>
            <span class="clear_both"></span>
        {% endif %}
    </div>

</div>
<div class="container">
    <div class="prev_next">
        {% if snapgroup.has_previous %}
          <a class="prev btn btn-info" href="?page={{snapgroup.previous_page_number}}">Prev</a>
        {% endif %}
        {% if snapgroup.has_next %}
          <a class="next btn btn-info" href="?page={{snapgroup.next_page_number}}">Next</a>
        {% endif %}
        <div class="pages">
          <ul>
          {% for pg in page_range %}
            {% if snapgroup.number == pg %}
              <li><a href="?page={{pg}}" class="btn btn-default">{{pg}}</a></li>
            {% else %}
              <li><a href="?page={{pg}}" class="btn">{{pg}}</a></li>
            {% endif %}
          {% endfor %}
          </ul>
        </div>
        <span class="clear_both"></span>
    </div>  
</div>

{% endblock %}

snapgroups.snap:

{% for sg in snapgroup.object_list %}
    <h4 id="combination" class="snap_date">{{sg.date|date:'l'}}, {{sg.date}}</h4>
    <ul>
    {% for snap in sg.snap_set.all %}
        <li><a href="{{MEDIA_URL}}{{snap.image}}" data-imagelightbox="f"><img src="{{MEDIA_URL}}{{snap.image}}" alt="{{snap.caption}}" /></a></li>
    {% endfor %}
        <span class="clear_both"></span>
    </ul>
{% endfor %}

예시적인 앱으로 보여드리겠습니다.이제 막 배우는 단계이기 때문에 아래 코드로 그런 앱을 하나 만들면 도움이 될 것입니다.

가능한 한 최소한의 암호를 유지하려고 노력했습니다.

models.py

class Article(...):
    title = models.CharField(...)
    photo = models.ImageField(...)

views.py

import json

def article_ajax(request):
    TOTAL = 10
    OFFSET = request.GET.get('offset', 0)
    END = offset + TOTAL
    # TOTAL means how many articles to load
    # in a single request

    # to understand OFFSET and END, consider this:
    # mylist = [1,2,3,4,5,6,7,8,9]
    # mylist[2:5] outputs => [3,4,5]
    # Above 2 is OFFSET and 5 is END

    articles = Article.objects.all()[OFFSET:END]

    json_list = []
    for article in articles:
        json_list.append({
            'title': article.title, 'photo_url': article.photo.url
        })

    data = json.dumps(json_list)

    return HttpResponse(data, content_type='application/json')

urls.py

...
url(r'^ajax/articles/$', 'myapp.views.article_ajax'),
...

기사들.

스크립트에는 무한 스크롤 코드도 포함되어 있습니다 :)

<!-- All articles will be loaded in following div -->
<div id="ArticlesDiv"></div>

<script>
var articleOffset = 0;

var articleLoader = function() {
    $.ajax({
        url: '/ajax/articles/?offset=' + articleOffset,
        success: function(data) {
            if (data.length > 0) {
                for (var i = 0, total = data.length; i < total; i++) {
                    var compile_data;
                    compile_data = '<h1>' + data[i].title + '</h1>\
                        <img src="' + data[i]photo_url + '">';

                    $('#ArticlesDiv').append(compile_data);
                }

                /* update the offset */
                articleOffset += 10
            } else {
                $('#ArticlesDiv').append('No articles found');
            }
        }
    });
}

/* Infinite scrolling for fetching articles */
var $window = $(window);
function prodScrollPosition() {
    var distance = $window.scrollTop() + $window.height();
    if ($('body').height() <= distance && $('#ArticlesDiv')) {
        articleLoader();
    }
}

$window.scroll(prodScrollPosition).scroll();

/* Manually initiate the first ajax request */
articleLoader();
</script>

나는 여전히 django-endless-pagination을 사용할 것이고 (그것은 최고의 아약스 기반 페이지 플러그인입니다), 당신의 문제에 대한 해결책은 다음을 기억하는 것입니다.lightbox호출 요청이 완료된 후 init, 콜백에 대한 자세한 내용을 읽어 보십시오.

<script type="text/javascript">
    function hookup_lightbox(){
        $( selector ).imageLightbox();
    }

    $.endlessPaginate({
        onCompleted: function(context, fragment) {
            // hookup lightbox
            hookup_lightbox();
        }
    });
</script>

언급URL : https://stackoverflow.com/questions/30918857/how-to-append-pages-of-data-using-jquery-and-django-pagination