Data can be loaded to non-hierarchical components in portions:
Currently dynamic loading for linear data is implemented for the following components: datatable and dataview.
To enable dynamic data loading you need to:
1 . Set the component datasource that will load initial data. It can be done either with the help of url property or load method;
var dview = webix.ui({
view:"dataview",
url:"data/data_dyn.php"
});
//or
dview.load("data/data_dyn.php");
2 . Optionally, define various aspects of dynamic loading such as:
webix.ui({
view:"dataview",
datafetch:50,
datathrottle: 500,
loadahead:100
});
When scolling or pagination occurs, the component will automatically issue a request based on the datasourse, e.g. "data/data_dyn.php?continue=true&count=100&start=130" where:
Note that your server script should be able to handle these parameters.
Serverside response should include the following information:
Sample of JSON response
{
"data":[
{"id":1,"package":"acx100-source"},
{"id":1,"package":"acx200-source"}
],
"pos":0,
"total_count":999
}
The loadNext method can be used to send a request that loads the specified number of records and parses them into the component. The arguments are:
Using url set in the component constructor
grida = webix.ui({
view:"datatable",
url:"data/data_dyn.php"
});
grida.loadNext(10, 0);
Related sample: Dynamic loading with removing the existing content
Using given url
gridb.loadNext(50,900,function(){
this.showItem(903);
}, "data/data_dyn.php");
Related sample: Setting loading position
The method allows the following scenarios:
grida.loadNext(30, pos, function(){
this.showItemByIndex(pos);
pos += 30;
});
//pos - index of the last data item
Related sample: Dynamic loading with appending content
webix.ui({
view:"datatable",
"data->onParse":function(){
this.clearAll();
this.data.url = "data/data.php";
}
});
grida.loadNext(10, base);
//base - index of the last data item
Related sample: Dynamic loading with removing the existing content
You can capture the moment just before a dynamic loading request is sent to server with the help of an onDataRequest event.
It can be used to cancel the default behavior and issue a custom data request:
dtable.attachEvent("onDataRequest", function (start, count) {
var data = custom_load_data(start, count);
dtable.parse(data, "json");
return false;
));