How can I implement Ajax pagination without side modules like endless-pagination

[Artie]

I need to make ajax pagination in my project and not allowed to use side modules like dajax or endless-pagination.

Code in my views.py is following

def listing(request):
    news_list = NewPost.objects.all()
    paginator = Paginator(news_list, 2)

    page = request.GET.get('page')
    try:
        news = paginator.page(page)
    except PageNotAnInteger:
        news = paginator.page(1)
    except EmptyPage:
        news = paginator.page(paginator.num_pages)

    return render_to_response('list.html', {"news": news})

Need to load new pages with AJAX

How it should be done?

[Collin Anderson]

copy/pasting from a recent website I worked on for an example...

we actually just had a "load more" button without showing the total number of pages. Not saying you should do it this way, but it's one possible way.

def listing(request):
    new_list = NewPost.objects.all()
    if request.GET.get('before'):
        new_list = new_list.filter(post_date__lte=request.GET.get('before'))
    num_posts = 6
    items = list(new_list[:num_posts + 1])
    return render('list.html', {'news': items[:num_posts], 'more': items[num_posts:]})

<div class="js-items">
    {% for item in news %}
        <div>{{ item }} etc </div>
    {% endfor %}
    {% if more %}
        <a href="?before={{ more.post_date.isoformat }}" class="js-load-more">Load More</a>
    {% end if %}
</div>

<script> // assuming jQuery is on the page
    $(document).on('click', '.js-load-more', function(e){
        e.preventDefault();
        var more_link = this;
        $.get(this.href, function(data){
            $(more_link).replaceWith($($.parseHTML(data)).find('.js-items').children());
        })
    })
</script>