DataTable can load data of various formats, such as:
In addition to the mentioned above, you can define any custom format (read how to do this in article Data Drivers).
There are two main ways of loading data in DataTable:
Both ways lead to one and the same result and don't have any specificity.
webix.ui({
view:"datatable",
data:[
{ id:1,name:"The Shawshank Redemption",year:1994},
{ id:2,name:"The Godfather",year:1972}
]
});
Related sample: Loading from an Inline Data Source
webix.ui({
view:"datatable",
url:"data/data.json"
});
Related sample: Datatable: Loading from Different File Types
The url property can be:
webix.ui({
view:"datatable",
url:"data/customers"
});
{ view:"datatable", autoConfig:true, url:function(params){
return webix.ajax("data/customers");
}};
{ view:"datatable", id:"table", autoConfig:true, url:{
$proxy:true,
load:function(view, params){
return webix.ajax().get("data/customers", params);
}
}};
When loading a non-json data, you need to specify the datatype property in config, or set the second parameter of the parse/load method to the name of the expected data type.
Also, you need to show in the columns configuration, which data will go to each column.
Loading from XML
webix.ui({
view:"datatable",
columns:[
{ map:"#cells[0]#", header:"Will use value from first cell sub-tag" }
{ map:"#details#", header:"Will use value from details attribute or sub-tag" }
],
datatype:"xml"
url:"data/data.xml"
});
Related sample: Loading from an External Data File
If you use xml format with tag names equal to column ids, you may skip mapping, DataTable will be able to auto-map values
Loading from CSV
grid = new webix.ui({
view:"datatable",
columns:[
{ map:"#data1#", header:"First column" }
{ map:"#data2#", header:"Second column" }
],
datatype:"csv"
url:"data/data.csv"
});
Related sample: Loading from an External Data File
For more details, check Data Mapping
To turn an HTML table into DataTable you should call method parse with next parameters:
Loading data from an html table
<table id="films">
<tr>
<td width="40">id</td>
<td width="200">Film title</td>
<td width="80">Release year</td>
</tr>
...
</table>
<script>grid = new webix.ui({
view:"datatable",
...
});
grid.parse("films", "htmltable");
</script>
Related sample: Loading from an HTML Table
To load data from database table(s), you should deal with both client and server sides.
On the client side you must define parameter url (or call method load()) and specify a server-side script there.
Static loading from db. Client-side code.
webix.ui({
url:"data/table_data.php"
});
// or
grid.load("data/table_data.php");
Server-side response should include the following information:
Sample of JSON response
{
"data":[
{"id":1,"package":"acx100-source"},
{"id":2,"package":"acx200-source"}
],
"pos":0,
"total_count":999
}
Related sample: Dynamic Loading from DB
Generally, a data source in case of dynamic loading is a database.
On the client side you must define the url parameter (or call the load() method) with a file implementing server-side 'communication'.
Dynamic loading from db. Client-side code
webix.ui({
url:"data/data_dyn.php"
});
Server-side response should include the following information:
Sample of JSON response
{
"data":[
{"id":1,"package":"acx100-source"},
{"id":2,"package":"acx200-source"}
],
"pos":0,
"total_count":999
}
Related sample: Dynamic Loading from DB
Note, inside dynamic_loading() you should specify a number of records that will be loaded at once.
The library offers you different properties and methods that can help you to set when, how often and which data will be loaded.
Parameter | Description | Usage example |
---|---|---|
datafetch | Defines the start position DataTable will load data from | You want to load the particular number of records (e.g. 80), then you set datafetch:80. Related sample: Setting Loading Position |
datathrottle | Sets polling interval that can be used to decrease the number of requests to server | As a rule, data are getting loaded when a user starts to scroll DataTable. If he scrolls DataTable slowly, the app pushes a big amount of requests to the server, a major part of which is unnecessary. To exclude unnecessary requests and reduce server overloading, you can set the datathrottle property, for example to 5, and requests start to be sent to server at 5 seconds intervals.
Related sample: Datatable: Setting Timeout for Dynamic Loading |
loadahead | Allows you to avoid DataTable from possible 'blank spots' while scrolling | When you start scrolling, DataTable detects where you scroll (up or down) and loads next records in this direction (the number of records is defined by the parameter). If you set loadahead:50, then on each scrolling movement DataTable will load next 50 records. Related sample: Dynamic Loading.Load Ahead |
When you deal with large data size, it's useful to display the loading screen showing users that the app is actually doing something.
Call the showOverlay() method to enable the loading screen for DataTable and hideOverlay() to disable it.
Using the loading screen in DataTable
webix.ui({
view:"datatable",
on:{
onBeforeLoad:function(){
this.showOverlay("Loading...");
},
onAfterLoad:function(){
this.hideOverlay();
}
},
url:"data/table_data.php"
});
Related sample: Loading Screen
In case you don't call the hideOverlay method, you will set the overlay text instead of the loading screen. It can be useful in some situations. For example, when your DataTable doesn't contain any data, you can display the overlay text to inform users about it.
Defining the overlay text for DataTable
on:{
onAfterLoad:function(){
if (!this.count())
this.showOverlay("Sorry, there is no data");
}
}
Related sample: Adding Overlay Text
You can load configuration from the server side along with data. In such a case your data will look as:
{
config:{
columns:[ // columns configuration here... ],
// any extra options here, the same as in constructor...
},
data:[ // an array of data objects here, as in the above samples... ]
}
Read more on the topic in the article External Configuration.
Back to top