Вызовите следующий API, используя смещение и лимит в datatable

Question

В своем вызове API я использую длину 4, поэтому все 4 данные отображаются.Также теперь я использую datable для добавления нумерации страниц, которая показывает только 1 строку на страницу.Он работает нормально, пока я не достигну 4. Теперь я хочу показать следующий набор данных, используя смещение и предел.Я тестирую с помощью почтальона, который работает нормально.Но как мне вызвать следующий API, когда он достигнет 4?

мой код jquery

    /* customers */
var jsonAPIUrl = apiUrl;

var offsetData = 1;

var callData = {
    email: "..............",
    token : "-------------",
    limit: 4,
    offset: offsetData
};

var app = {

createApiPath : function(apiController, apiAction) {
    var jsonUrl = jsonAPIUrl + 'api/' + apiController + '/' +  apiAction + '/';
    return jsonUrl;
},

apiCustomPost: function (apiController, apiAction, callParams, callback) {
    $.ajax({
            url: this.createApiPath(apiController, apiAction),
            method: "post",
            data:{
                    callData: JSON.parse(JSON.stringify(callParams)),
                    api_version: 1,
                    deviceType: 'web'
                },
            async: true,
            dataType: "json",
            success: callback,
            error: function (xhr, ajaxOptions, thrownError) {
        }
    });

},

init : function() {
    app.apiCustomPost("manager","getCustomerList", callData , function(res){
        data_Offset++
        callData["offset"] = data_limit * data_Offset;
        console.log(res.data);
        var reshtm = "";
        var customersData = res.data;
        var resDeeplink = "";
        var profile_pic_url = "";
        var resPhoneNum = "";
        var resStatus = "";
        for(var i=0; i<customersData.length; i++){

                if(customersData[i].attributes != null && customersData[i].attributes != "" && customersData[i].attributes!= undefined) {
                    var resAttributes = JSON.parse(customersData[i].attributes);
                    console.log(resAttributes);
                    resDeeplink =  resAttributes.deeplink; 
                    profile_pic_url = resAttributes.profile_pic_url;
                    resPhoneNum = resAttributes.customer_phone;
                    resStatus = resAttributes.customer_status;
                }
                  reshtm += '<tr>\
                             <td class="customer_thumbnail"><img src="'+profile_pic_url+'" alt="Customers"></td>\
                             <td class="customer_name">'+customersData[i].name+'</td>\
                             <td class="customer_email">'+customersData[i].email+'</td>\
                             <td class="customer_phone">'+resPhoneNum+'</td>\
                             <td class="customer_agent">'+resStatus+'</td>\
                             <td class="customer_action">\
                                <div class="dropdown">\
                                  <a class="dropdown_icon" data-toggle="dropdown" href="#"><i class="fa fa-ellipsis-h"></i></a>\
                                  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">\
                                    <li><a href="#"><i class="fa fa-eye"></i> View Account</a></li>\
                                    <li><a href="'+resDeeplink+'" target="_blank"><i class="fa fa-link"></i> Get Deep Link</a></li>\
                                    <li><a href="#"><i class="fa fa-recycle"></i> Deactivate</a></li>\
                                    <li><a href="#"><i class="fa fa-remove"></i>  Delete</a></li>\
                                  </ul>\
                                </div>\
                             </td>\
                             </tr>';


        }
        $("#customer_body_loop").html(reshtm);
        $('#customers_body_list').DataTable({
              "pageLength": 1
        });

    });
},

}

$(document).ready(function () {
    console.log("jQuery Ready")
    app.init();
});