我需要在Django模板中使用jQuery进行Ajax分页。
我的模板中包含以下代码:
<script type="text/javascript"> $(document).ready(function() { $("#next-page").click(function() { var page = {{ vms.next_page_number }}; $("#vms").html(' ').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>
和我的看法:
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), )
因此,每当我按“下一步”时,它实际上会发出Ajax请求,但数据不会在表中呈现。
对于分页,使用django.core.paginator,我真的很愿意在可能的情况下坚持使用。
您能看到代码缺失/错误吗?
我没有发现错误,但下面向您展示如何解决此任务。我认为您可以轻松地使其适应您的需求。
jQuery ajax部分:
<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>
模板html部分:
<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> ....