2017-12-05 15 views
0

Webix DataTable을는 PHP 나는 그것이 PHP 스크립트에서 읽기가

를 통해 동적 로딩을 webix하지만, 그것은 단지 최초의 데이터 집합을 잡고. PHP 스크립트는 & 페이지 = [현재 페이지]를 받아들입니다. & 크기 = [레코드 수] 모든 레코드를 제공하면 페이지를 생성 할 수 있습니다. (LOL 약 1 기가 이잖아 인해 작동하지 않을 것이다. 여기서

데이터의 일례이다.

{ 
"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": [] 

} 여기

[I 2 개 결과로 한정 한] JS 내가 webix 데이터 테이블에 데이터를 뽑아 사용하는 것입니다. 나는이 문제를 알아 내려고 주에 대해 썼다

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; 
}) 

, 그래서 친절 해. 미리 감사드립니다.

답변

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

이 전에 그것을 구문 분석에 JS의 데이터를 조작하는 문서화 된 webix 약속 스타일의 기능보다 더 나은 작품의 서버 측 응답을 일치하도록 컨트롤러를 변경했습니다.