2

PurchaseHistory という名前のクラスを持つ次の JavaScript コードがあります。

var baseUrl = null;
var parameters = null;
var currentPageNumber = null;
var TotalPages = null;
var PageSize = null;

$(document).ready(function () {
    baseUrl = "http://localhost/API/service.svc/GetOrderHistory";
    parameters = '{"userId":1 , "page":1 ,"pageSize":4}';
    currentPageNumber = 1;
    var history = new PurchaseHistory();
    history.ajaxCall(parameters);
});

function PurchaseHistory() {
/* On ajax error show error message
-------------------------------------------------*/
this.onAjaxError = function() {
    $('#error').text('No internet connection.').css('color', 'red');
}

/* Ajax call 
-------------------------------------------------*/
this.ajaxCall = function (parameters) {
    $.support.core = true;
    $.ajax({
        type: "POST",
        url: baseUrl,
        data: parameters,
        //dataType: 'json',
        contentType: "application/json; charset=UTF-8",
        error: function () { this.onAjaxError() }
    }).done(function (data) {
        var json = data.GetOrderHistoryResult;
        var jsonObject = $.parseJSON(json);
        var history = new PurchaseHistory();
        history.populateOrderHistory(jsonObject);
        TotalPages = jsonObject.PgCnt;
        currentPageNumber = jsonObject.CrntPg;
    });
}

this.populateOrderHistory = function(results) {
    var rowOutput = "";
    var his = new PurchaseHistory();
    for (var i = 0; i < results.Results.length; i++) {
        rowOutput += this.renderCartList(results.Results[i], 1);
    }
}

this.renderCartList = function(res, i) {
    var container = $('#prototype-listelement>li').clone();
    container.find('.order-date').text(res.OdrDate);
    container.find('.item-count').text(res.Qty);
    container.find('.total').text(res.Amt);
    container.find('.order-id').text(res.OdrId);
    $('#mainul').append(container).listview('refresh');
}

this.loadNextPage = function () {
    parameters = '{"userId":1 , "page":' + currentPageNumber + 1 + ',"pageSize":4}';
    this.ajaxCall(parameters);
}

}

ajaxCall は、javascript の ready 関数で行われます。この ajax 呼び出しは、現在のページ番号、合計ページ数、ページ サイズなどのページ情報を含む Json オブジェクトを返します。

現在、ページが読み込まれると、UI に情報を表示できます。

私の問題:-ボタンクリックイベントで、ajaxメソッドを再度呼び出したいです。これを可能にする方法と、以前の ajax 呼び出しから取得した情報をどこに保存できますか?

4

1 に答える 1

0

ページネーションのために、より多くのアイテムをページにロードするリンクを作成し、開始番号を保存してデータレイヤーに渡します。この例では、一度に 20 個をロードします。

<a class="more" href="#" data-start="0">show more</a>

$("a.more").click(function(e){
 e.preventDefault();
 var start = $(this).attr('data-start');

 $.get('/more-data, { start: start }, function(d){
   var next = start+20;
   $("a.more").attr('data-start', next);

   //process results here, do something with 'd'

 });
});
于 2012-10-06T06:50:17.650 に答える