django.core.paginator Ajax pagination with jQuery

Question

Problem

I need Ajax pagination using jQuery in a Django template.

Situation

I have the following code in my template:

<script type="text/javascript">
$(document).ready(function() {
    $("#next-page").click(function() {
        var page = {{ vms.next_page_number }};
        $("#vms").html('&nbsp;').load (
            '{% url virtualmachine-list %}?page=' + q );
    });
});
</script>

[code omitted]

<table>
<thead>

    [code omitted]

</thead>
<tbody id="vms">
    {% for vm in vms.object_list %}

         [code omitted]

    {% endfor %}
</tbody>
</table>


[code omitted]

{% if vms.has_next %}
    <!--<a href="?page={{ vms.next_page_number }}" id="next-page">Next</a>-->
        <a href="#" id="next-page">Next</a>
    {% endif %}
</span>

and my view:

def list_(request):
    vms = VirtualMachine.objects.all()
    paginator = Paginator(vms, 10)

    page = 1
    if request.is_ajax():
        query = request.GET.get('page')
        if query is not None:
            page = query

    try:
        vms = paginator.page(page)
    except (EmptyPage, InvalidPage):
        vms = paginator.page(paginator.num_pages)

    return render_to_response('virtual_machine/list.html', {
        'vms': vms,
        },
        context_instance=RequestContext(request),
    )

Conclusion

So, whenever I press "Next", it actually does an Ajax request, but the data doesn't get rendered in the table.

For pagination django.core.paginator is used, and I would really like to stick with it, when possible.

Can you see what is missing/wrong with the code?

Answer 1

I did not find the error, but I show you below how I solved this task. I think you can adapt it easily to your needs.

The jquery ajax part:

<script type="text/javascript">
function ajax_get_update()
    {
       $.get(url, function(results){
          //get the parts of the result you want to update. Just select the needed parts of the response
          var table = $("table", results);
          var span = $("span.step-links", results);

          //update the ajax_table_result with the return value
          $('#ajax_table_result').html(table);
          $('.step-links').html(span);
        }, "html");
    }

//bind the corresponding links in your document to the ajax get function
$( document ).ready( function() {
    $( '.step-links #prev' ).click( function(e) {
        e.preventDefault();
        url = ($( '.step-links #prev' )[0].href);
        ajax_get_update();
    });
    $( '.step-links #next' ).click( function(e) {
        e.preventDefault();
        url = ($( '.step-links #next' )[0].href);
        ajax_get_update();

    });
});

//since the links are reloaded we have to bind the links again
//to the actions
$( document ).ajaxStop( function() {
    $( '.step-links #prev' ).click( function(e) {
        e.preventDefault();
        url = ($( '.step-links #prev' )[0].href);
        ajax_get_update();
    });
    $( '.step-links #next' ).click( function(e) {
        e.preventDefault();
        url = ($( '.step-links #next' )[0].href);
        ajax_get_update();
    });
});
</script>

The template html part:

<div class="pagination">
            <span class="step-links">
                {% if object_list.has_previous %}
                <a id="prev" href="?{{ urlquerystring_previous_page }}">previous</a>
                {% else %}
                <span style="visibility:hidden;">previous</span>
                {% endif %}

                <span class="current">
                Page {{ object_list.number }} of {{ object_list.paginator.num_pages }}.
                </span>

                {% if object_list.has_next %}
                            <a id="next" href="?{{ urlquerystring_next_page }}">next</a>
                {% else %}
                            <span style="visibility:hidden;">next</span>
                {% endif %}
            </span>
        </div>

            <form class="" id="action-selecter" action="{{ request.path }}" method="POST">

            <div id="ajax_table_result">
                <table class="w600" cellspacing="5">
                    <thead>
                        {% table_header headers %}
                    </thead>
                        <tbody>
                          ....