在数据表中使用偏移量和限制调用下一个api

时间:2019-02-15 07:01:36

标签: javascript ajax api datatable

在我的API调用中,我使用的是长度4,因此所有4个数据都显示出来。现在我也使用datable添加分页,每页仅显示1行。直到达到总计4为止,它都可以正常工作。现在,我想使用offset和limit显示下一组数据。我使用工作正常的邮递员进行测试。但是,当下一个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();
});

enter image description here

0 个答案:

没有答案