webix动态加载通过PHP

时间:2017-12-05 05:31:31

标签: javascript jquery json datatable webix

Webix DataTable

我从php脚本中读取它,但它只抓取第一个数据集。 php脚本接受& page = [当前页面]和& size = [记录数] 如果我把所有的记录都给它,我只能把它搞定。 (因为大约1 gig lol,所以不会工作。

以下是数据示例。 [我将其限制为2个结果]

{
"count": 84,
"count_filtered": 84,
"rows": [
    {
        "id": 1,
        "accountName": "test",
        "status": 2,
        "notes": null,
        "globalIframe": null,
        "globalPostback": null,
        "postBackDelayMS": 0,
        "streetAddress1": null,
        "streetAddress2": null,
        "postalCode": null,
        "city": null,
        "countryCode": null,
        "stateProvince": null,
        "accountManager": 1,
        "paymentCycle": 0,
        "minimumPayment": 100,
        "paymentType": 0,
        "paymentDetails": null,
        "created_at": "2017-12-02 19:03:41",
        "updated_at": "2017-12-02 19:03:41"
    },
    {
        "id": 2,
        "accountName": "ta",
        "status": 2,
        "notes": null,
        "globalIframe": null,
        "globalPostback": null,
        "postBackDelayMS": 0,
        "streetAddress1": null,
        "streetAddress2": null,
        "postalCode": null,
        "city": null,
        "countryCode": null,
        "stateProvince": null,
        "accountManager": 1,
        "paymentCycle": 0,
        "minimumPayment": 100,
        "paymentType": 0,
        "paymentDetails": null,
        "created_at": "2017-12-02 19:07:49",
        "updated_at": "2017-12-02 19:07:49"
    }
],
"listable": []

}

这是我用来将数据提取到webix数据表中的JS。

var datatable = webix.ui({
    view:"datatable", 
    container:"dataTable",
    datafetch:20,
    datathrottle: 500,
    loadahead:100,
    autoheight:true,
    autowidth:true,
    yCount:10,
    autoConfig:true,
    columns:[
{ id:"accountName",    header:"Affiliate Name",  width:tableWidth}
],
on:{
    onBeforeLoad:function(){
        this.showOverlay("Loading...");
    },
    onAfterLoad:function(){
        this.hideOverlay();
    }
},

url:function(details){
    return webix.ajax("/affiliates/data?1").then(function(data){
        var js = data.json();
        var new_js = [];

        for (key in js['rows']){
            new_js.push({
                id:js['rows'][key].id, 
                accountName:js['rows'][key].accountName
            });     

        };

        return new_js;
    })
},
navigation:"true",
pager:{
    container:"dataPager",
    size:10,
    group:4

}
}); 


datatable.attachEvent("onDataRequest", function(start, count, callback){     //count
    var view = this;
    console.log("GETTING DATA");
    webix.ajax().get("/affiliates/data?size=10&page="+start/10).then(function(data){
        console.log(data);

    this.parse(data.json());
     var js = data.json();
    var new_js = [];

    for (key in js['rows']){
        new_js.push({
            id:js['rows'][key].id, 
            accountName:js['rows'][key].accountName
        });     

    };
    return new_js;
})
    return false;
})

我花了大约一个星期试图解决这个问题,所以请保持温和。 提前致谢。

1 个答案:

答案 0 :(得分:0)

所以我解决了。

var datatable = webix.ui({
    view:"datatable", 
    container:"dataTable",
    datafetch:25,
    datathrottle: 500,
    loadahead:0,
    autoheight:true,
    autowidth:true,
    yCount:25,
    autoConfig:true,
    columns:[
{ id:"accountName",    header:"Affiliate Name",  width:tableWidth, sort:"server"}
],
on:{
    onBeforeLoad:function(){
        this.showOverlay("Loading...");
    },
    onAfterLoad:function(){
        this.hideOverlay();
    }
},
url:'/affiliates/webixdata',
navigation:"true",
pager:{
    container:"dataPager",
    size:25


}
}); 

然后我更改了控制器以匹配服务器端的响应 https://docs.webix.com/desktop__plain_dynamic_loading.html#serversideresponse

这比记录的webix promise样式函数更有效,可以在解析之前操作JS中的数据。