3

次のコードで 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]))

ただし、私が直面している2つの問題があります。1 つ目は、responseが実際には HTML ではなく、多数のn\t\t\n\t\t\n\t\n\t\n\t\n\t\t\n\t\などがあることです。また、現在のページを追跡したり、必要に応じて URL を変更したりするのに問題があります。ここで機能的な ajax ページネーションを構築するにはどうすればよいですか?

更新：最初のものは、実行することでわかりましたresponse = $.parseJSON(response);。ただし、どのページにいるのかをどのように追跡できますか?

4

4 に答える 4

2

「jQuery、PHP、および MySQL を使用した Ajax スクロール ページング」に関するこのチュートリアルを確認すると、作業が簡素化される場合があります 。 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;
                    }
                });
            }
       }
    });
});
于 2014-12-16T09:19:38.417 に答える
2

ページを追跡するには、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/

于 2012-05-07T02:21:17.890 に答える
0

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)
    });
})
于 2012-05-06T23:47:46.660 に答える
0 
jQuery.get(url, [data], [callback], [type])

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

最後のパラメータを "html" として定義してみてはどうでしょうか?

于 2012-05-06T23:59:16.503 に答える