[Django]-Creating ajax pagination

2๐Ÿ‘

โœ…

To keep track of the page, you can increment/decrement a variable on click with your AJAX function. Try this:

var counter="0";

$(document.body).on('click', ".pages .prev, .pages .next", function(event) {

   if($(this).hasClass('prev')
    counter--;// <--decrement for clicking previous button
   else if($(this).hasClass('next')
    counter++; // <--increment for clicking next button

  event.preventDefault()

   $.get('/ajax/financial_page/', {'page': counter}, function(response) {
    $(".content table").replaceWith(response)
   });
})

I would also not use live method as it is deprecated as of jQuery 1.7. It has been replace by the on method. See the jQuery on() API here: http://api.jquery.com/on/

๐Ÿ‘คtim peterson

2๐Ÿ‘

Check this tutorial about โ€œAjax Scroll Paging Using jQuery, PHP and MySQLโ€, it may simplify your job:
http://www.bewebdeveloper.com/tutorial-about-ajax-scroll-paging-using-jquery-php-and-mysql

Here is the essential from:

var is_loading = false; // initialize is_loading by false to accept new loading
var limit = 4; // limit items per page
$(function() {
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            if (is_loading == false) { // stop loading many times for the same page
                // set is_loading to true to refuse new loading
                is_loading = true;
                // display the waiting loader
                $('#loader').show();
                // execute an ajax query to load more statments
                $.ajax({
                    url: 'load_more.php',
                    type: 'POST',
                    data: {last_id:last_id, limit:limit},
                    success:function(data){
                        // now we have the response, so hide the loader
                        $('#loader').hide();
                        // append: add the new statments to the existing data
                        $('#items').append(data);
                        // set is_loading to false to accept new loading
                        is_loading = false;
                    }
                });
            }
       }
    });
});
๐Ÿ‘คAli Aboussebaba

0๐Ÿ‘

Try using the javascript String.replace() method:

// AJAX pagination
$(".pages .prev").live('click', function(event) {
    event.preventDefault()
    var current_page = parseInt(getParameterByName('page'))-1;
    $.post('/ajax/financial_page/', {'page': current_page}, function(response) {
        response = response.replace(/\n/g,'<br>').replace(/\t/,'&nbsp;&nbsp;');
        $(".content table").replaceWith(response)
    });
})
๐Ÿ‘คDanilo Valente

0๐Ÿ‘

jQuery.get(url, [data], [callback], [type])

type :xml, html, script, json, text, _defaultใ€‚

how about trying to define the last parameter as โ€œhtmlโ€ ?

๐Ÿ‘คanna

Leave a comment