django.core.paginator Ajax pagination with jQuery

前端 未结 2 2022
北荒
北荒 2020-12-24 15:58

Problem

I need Ajax pagination using jQuery in a Django template.

Situation

I have the following code in my template:



        
相关标签:
2条回答
  • 2020-12-24 16:07

    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>
                              ....
    
    0 讨论(0)
  • 2020-12-24 16:27

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

    0 讨论(0)
提交回复
热议问题