如何使用jQuery和Django分页附加数据页？

我正在使用Django的内置分页来分页数据并在模板中显示。我现在想实现jQuery使用ajax加载和附加到模板的页面。我如何使用jQuery？

之前我使用了django-endless-pagination，但是由于它添加了JavaScript的条目，我的灯箱来显示图像并没有捕获图像元素，只显示在第一个请求时加载的条目。

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.html：

{% 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.html：

{% 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 %}

解决方法

我仍然会使用 django-endless-pagination(它是最好的基于ajax的分页插件)，解决您的问题是在分页请求完成后调用lightBox init，在 callbacks上阅读更多：

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

    $.endlesspaginate({
        onCompleted: function(context,fragment) {
            // hookup lightBox
            hookup_lightBox();
        }
    });
</script>

原文地址：https://www.jb51.cc/jquery/182408.html