django.core.paginator Ajax paginazione con jQuery

Problema

Ho bisogno di Ajax impaginazione utilizzando jQuery in un Django modello.

Situazione

Ho il seguente codice nel mio modello:

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

e il mio punto di vista:

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

Conclusione

Così, ogni volta che premo “Avanti”, è in realtà una richiesta Ajax, ma i dati non vengono disegnati nella tabella.

Per l’impaginazione di django.core.paginator è usato, e mi piacerebbe davvero bastone con esso, quando possibile.

Si può vedere ciò che è mancante/errato con il codice?

 

2 Replies
  1. 14

    Non ho trovato l’errore, ma ti riporto qui di seguito come ho risolto questo compito. Penso che si può adattare facilmente alle vostre esigenze.

    L’ajax di jquery parte:

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

    Template html parte:

    <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>
                              ....
    • OMG!!! Non mi aspettavo una simile risposta… proverò subito.
    • Funziona, ad eccezione di il vostro urlquerystring_next_page e urlquerystring_previous_page templatetags, ma che non è così importante. Vi ringrazio tanto.
    • 🙂 Sono contento che mi possono essere di aiuto! Se si vuole scavare in questo urlquerystring_previous_page cose, di dare un’occhiata qui. pastebin.com/FKAbCeWG è il codice che uso io dentro il mio punto di vista per creare questa variabile di contesto.
    • Sembra funzionare solo ogni secondo di tempo. Per esempio, se si dispone di cinque pagine, prima di andare a pagina 2, funziona, ma quando vado in 3 ° pagina, sarebbe ricaricare l’intera pagina html. Ho capito che ajaxStop() non viene chiamato e presumo che causa il problema. Qualcuno ha qualche idea?
    • Ho scoperto il motivo del mio problema e mi chiedo se Thomas risposta è davvero una soluzione. Si sta tentando di riprodurre un evento che si sta aggiornando. Penso ajaxStop dovrebbe legare i nuovi collegamenti, ma nel mio caso non è stato così. Invece ho usato .on(). Il codice precedente può essere riscritta come
    • parzialmente mi ha aiutato a scrivere la mia soluzione youtu.essere/LUvT7ZdSE8Y

  2. 3

    Dovrebbe essere request.is_ajax(), is_ajax() è un metodo!

    • Vorrei dare 1 punto se si trattasse di un commento, perché questa non è una risposta al problema.

Lascia un commento