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 opinion:

 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 click Next, it actually executes an Ajax request, but the data does not appear in the table.

Django.core.paginator is used for pagination, and I really would like to stick with it whenever possible.

Do you see that the code is missing?

Answer 1

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

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> 

Part of the html template:

 <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> .... 

Answer 2

It should be request.is_ajax() , is_ajax() is a method!