django.core.paginator使用jQuery进行Ajax分页

Question

问题

我需要在Django模板中使用jQuery进行Ajax分页。

情况

我的模板中包含以下代码：

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

和我的看法：

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，我真的很愿意在可能的情况下坚持使用。

您能看到代码缺失/错误吗？

Answer 1

我没有发现错误，但下面向您展示如何解决此任务。我认为您可以轻松地使其适应您的需求。

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