Python Django how to do is pagination show more + ajax?

Views:
def pagination_ajax(request):
 if request.is_ajax():
 elem = request.GET.get('value', 10)
 news = serializers.serialize('json', News.objects.all()[:elem])
 return HttpResponse(news, content_type='application/json')
<code>
url: 
url(r'^ajax/paginate$', views.pagination_ajax, name='paginate_ajax')

Button:
<button type="submit" id="pagination">Show more</button>

JS:
 $('#pagination').click(function () {
$.ajax({
 type: 'get',
 url: 'http://127.0.0.1:8000/news/ajax/paginate',
 dataType: "json"

});
});
How to fix that worked?</code>
June 14th 19 at 18:14
1 answer
June 14th 19 at 18:16
Solution
Something like this:

Code view:
def projects_list_view(request):
 projects_per_page = 9
 projects = Project.objects.language(request.LANGUAGE_CODE).all().order_by('order').select_related('customer')
 paginator = Paginator(projects, projects_per_page)
 page = request.GET.get('page')
try:
 projects = paginator.page(page)
 except PageNotAnInteger:
 projects = paginator.page(1)
 except EmptyPage:
 if request.is_ajax():
 return HttpResponse(")
 projects = paginator.page(paginator.num_pages)
 if request.is_ajax():
 return render(request, 'projects/_list_ajax.html', {'projects': projects})
 return render(request, 'projects/_list.html', {'projects': projects, 'seo': seo,
 'page_description': page_description})


The template code _list.html:
<div class="row" id="project_list">
 {% include 'projects/project_list_ajax.html' %}
</div>
 <div class="row" id="preloader">
.....
</div>
 <div class="row">
 <div class="col s12 m12 center-align">
 <button class="btn waves-effect waves-light" id="lazy_more">
 {% trans 'More projects' %}
</button>
</div>
 </div>


The template code _list_ajax.html:
{% for project in projects %}
 <div class="col s12 m4">
 <div class="card large sticky-action">
 <div class="card-image waves-effect waves-block waves-light">
 {% if project.image %}
 <img src="{{ project.image.url }}" class="activator" alt="{{ project.title }}">
 {% endif %}
</div>
 <div class="card-content">
 <h4 class="card-title activator">
 {{ project.title }}
 <i class="material-icons right">more_vert</i>
</h4>
 <div class="card-customer">
 <h6>{{ project.customer.title|upper }}</h6>
 <span>{{ project.customer.description }}</span>
</div>
</div>
 <div class="card-reveal">
 <h4 class="card-title">
 {{ project.title }}
 <i class="material-icons right">close</i>
</h4>
 {{ project.description }}
</div>
</div>
</div>
{% endfor %}


The js code:
var page = 1;
var empty_page = false;
var block_request = false;

$('#lazy_more').click(function (e) {
e.preventDefault();
 if (empty_page === false && block_request === false) {
 block_request = true;
 page += 1;
$('#preloader').show();
 $.get('?page=' + page, function (data) {
$('#preloader').hide();
 if (data === ") {
 empty_page = true;
 } else {
 block_request = false;
$('#project_list').append(data);
}
});
}
});


"Lazy load" was implemented as a custom pagination in django. When the first request is rendered main template with includes _list_ajax.html in which data is transmitted, which render necessary. When you click "More" - sends a get ajax request with the number of the next page - if it is then the answer comes the rendered template _list_ajax.html - which is inserted into the corresponding unit.

Hope it will help :)
Thanks for help) - johann_Berge commented on June 14th 19 at 18:19

Find more questions by tags DjangoPython