[Solved]-Django.core.paginator Ajax pagination with jQuery

15๐Ÿ‘

โœ…

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>
                          ....
๐Ÿ‘คThomas Kremmel

2๐Ÿ‘

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

Leave a comment