You have the possibility to load not only data but also DataTable configuration from external file or the server side.
To load both data and configuration from JSON file, initialize DataTable as shown below:
dtable = new webix.ui({
container:"box",
view:"datatable",
url:"data/data-config.json" //path to json file. See the file content below
});
The specified data-config.json file should have the following structure:
'data-config.json' file
{
"config":{
columns:[
{ id:"title", header:"Film title", width:200},
{ id:"year", header:"Released", width:80},
{ id:"votes", header:"Votes", width:100}
],
height:100,
autowidth:true
},
"data":[
{id:"1", title:"The Shawshank Redemption", year:"1994", votes:"678790"},
{id:"2", title:"The Godfather", year:"1972", votes:"511495"}
]
}
To load both data and configuration from XML file, initialize DataTable as shown below:
dtable = new webix.ui({
container:"box",
view:"datatable",
url:"data/data-config.xml"// path to XML file. See the file content below
});
The specified data-config.xml should have the following structure:
'data-config.xml' file
<?xml version='1.0' encoding='utf-8' ?>
<data>
<config>
<columns>
<column id="title" header="Film title" width="200"></column>
<column id="year" header="Released" width="80"></column>
<column id="votes" header="Votes" width="100"></column>
</columns>
<height>100</height>
<autowidth>true</autowidth>
</config>
<item id='1' title='The Shawshank Redemption' year='1994' votes='678790'></item>
<item id='2' title='The Godfather' year='1972' votes='511495'></item>
</data>
Related sample: Loading Configuration from External URL
To load DataTable configuration from the server side, initialize DataTable as shown below:
webix.ajax("data/config.json", function(text){
var config = webix.DataDriver.json.toObject(text);
new webix.ui({
container:"box",
view:"datatable",
columns:config,
data: [
{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790},
{ id:2, title:"The Godfather", year:1972, votes:511495}
]
});
});
The specified config.json file should have the following structure:
'config.json' file
[
{ id:"title", header:"Film title", width:200},
{ id:"year", header:"Released" , width:80},
{ id:"votes", header:"Votes", width:100}
]
To load both data and configuration from the server side, initialize DataTable as shown below:
webix.ajax("data/data-config.json", function(text){
var obj = webix.DataDriver.json.toObject(text);
new webix.ui({
container:"box",
view:"datatable",
columns:obj.config,
data:obj.rows
});
});
The specified data-config.json file should have the following structure:
'data-config.json' file
{
"config":[
{ id:"title", header:"Film title", width:200},
{ id:"year", header:"Released", width:80},
{ id:"votes", header:"Votes", width:100}
],
"rows":[
{ "id":1, "title":"The Shawshank Redemption", "year":1994, "votes":678790},
{ "id":2, "title":"The Godfather", "year":1972, "votes":511495}
]
}
Related sample: Loading Configuration from Server Side
Back to top