Sto utilizzando lo strumento integrato di Django pagination
per impaginare i dati e visualizzarli nel modello. Ora vorrei implementare jQuery per caricare e aggiungere pagine al modello usando ajax. Come lo faccio usando jQuery?Come aggiungere pagine di dati usando l'impaginazione jQuery e Django?
Stavo usando django-endless-pagination prima, ma poiché aggiunge le voci di JavaScript il mio lightbox per visualizzare le immagini non cattura gli elementi dell'immagine e visualizza solo la voce che è stata caricata alla prima richiesta.
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 %}
personalmente non vorrei utilizzare l'impaginazione di Django, se si desidera utilizzare Ajax. Ci sono molti cercapersone JavaScript che funzionano molto bene con i dati JSON inviati dal server Django. Oppure, se si volesse, si potrebbe usare Django-Rest-Framework che ha anche una paginazione integrata, ma sarebbe molto più efficiente colpire gli endpoint tramite ajax. –
@ChrisHawkes Sì, sarebbe meglio. Ma sto solo imparando, potresti per favore mostrarmi come farlo. Va bene se dovessi cambiare il codice se ottengo il risultato che voglio. – Robin