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的ready函数上创建的。此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'

 });
});

如何在飞行中调用ajax来实现分页

1 个答案: