javascript - 如何动态调用ajax来实现分页

Question

我有以下 javascript 代码，其中包含名为 PurchaseHistory 的类。

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 的就绪函数上进行的。此 ajax 调用返回带有页面信息的 Json 对象，其中包括当前页码、总页数和页面大小。

目前我可以在页面加载时在 UI 上显示信息。

我的问题:-我想在按钮单击事件上再次调用 ajax 方法。如何做到这一点，我可以在哪里存储从以前的 ajax 调用中获得的信息？

Answer 1

对于分页，我会创建一个链接，将更多项目加载到页面上，并保存一个起始编号以传递给您的数据层。此示例一次加载 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'

 });
});