創建AJAX分頁

Question

我試圖做一個ajax分頁用下面的代碼：

// AJAX pagination 
$(".pages .prev").live('click', function(event) { 
    event.preventDefault() 
    var current_page = parseInt(getParameterByName('page'))-1; 
    $.get('/ajax/financial_page/', {'page': current_page}, function(response) { 
     $(".content table").replaceWith(response) 
    }); 
}) 

在我看來，功能：

def financial_page(request): 
    """ 
    Returns a single financials page, without extra HTML (used in AJAX calls). 
    """ 
    page = int(request.GET.get('page', 1)) 
    if request.user.is_superuser: 
     fs = FinancialStatements.objects.order_by('-date', 'statement_id') 
    else: 
     up = request.user.get_profile() 
     providers = up.provider.all() 
     fs = FinancialStatements.objects.filter(provider__in=providers).order_by('-date', 'statement_id') 

    fs_objects, current_page_object, page_range = paginator(request, objects=fs, page=page, number_per_page=30) 
    data = { 'fs':fs_objects, 
       'page_range': page_range, 
       'current_page': current_page_object, 
      } 
    page = render_to_string('financial_section.html', data, RequestContext(request)) 
    return HttpResponse(simplejson.dumps([page])) 

不過，也有我運行到兩個問題。第一個是response不是真的HTML，並且有一堆n\t\t\n\t\t\n\t\n\t\n\t\n\t\t\n\t\等。另外，我無法跟蹤當前頁面/根據需要更改網址。我將如何在這裏構建一個功能性Ajax分頁？

更新：我想通過做response = $.parseJSON(response);想出第一個。但是，我將如何跟蹤我所處的頁面？

Answer 1

要跟蹤頁面，可以使用AJAX功能單擊增加/減少變量。試試這個：

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) 
    }); 
}) 

我也不會用live方法，因爲它是不贊成的jQuery 1.7。它已被on方法取代。見jQuery的on() API這裏：http://api.jquery.com/on/

Answer 2

嘗試使用JavaScript與string.replace（）方法：

// 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) 
    }); 
}) 

Answer 3

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

type :xml, html, script, json, text, _default。 

怎麼樣努力確定最後的參數爲 「HTML」？

Answer 4

檢查本教程的 「阿賈克斯滾動分頁使用jQuery，PHP和MySQL」，它可以簡化您的工作： http://www.bewebdeveloper.com/tutorial-about-ajax-scroll-paging-using-jquery-php-and-mysql

這裏是至關重要的：

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; 
        } 
       }); 
      } 
     } 
    }); 
});