我使用Django内置的pagination
对数据进行分页并显示在模板中。我现在想实现jQuery来加载和附加页面到使用ajax的模板。如何使用jQuery完成此操作?
我之前使用的是django-endless-pagination,但是因为它通过JavaScript添加了条目,所以我的显示图像的lightbox不会捕捉图像元素,只显示第一次请求时加载的条目。
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 %}
发布于 2015-06-22 04:16:32
我仍然使用django-endless-pagination (它是目前最好的基于ajax的分页插件),您的问题的解决方案是在分页请求完成后重新调用lightbox
初始化,请阅读callbacks上的更多内容
<script type="text/javascript">
function hookup_lightbox(){
$( selector ).imageLightbox();
}
$.endlessPaginate({
onCompleted: function(context, fragment) {
// hookup lightbox
hookup_lightbox();
}
});
</script>
https://stackoverflow.com/questions/30918857
复制相似问题