django.core.paginator Ajax pagination with jQuery
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> ....