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.
grid = new webix.ui({
view:"datatable",
...
data:[
{ id:1,name:"The Shawshank Redemption",year:1994},
{ id:2,name:"The Godfather",year:1972}
]
});
Related sample: Loading from inline datasource
grid = new webix.ui({
view:"datatable",
...
url:"data/data.json"
});
Related sample: Loading from an external data file
When loading of 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
grid = new 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 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.
On the server side you should write the script realizing server-client 'communication' that returns data in the XML or JSON format:
Static loading from db. Server-side code
<?php
require_once("../../common/config.php");
$data = new JSONDataConnector($conn, $dbtype);
$data->dynamic_loading(30);
$data->render_table("packages_plain","id","package, size, architecture, section");
?>
Static loading from db. Client-side code.
grid = new webix.ui({
...
url:"data/table_data.php"
});
//or
grid.load("data/table_data.php");
Related sample: Loading from DB
Generally, data source in case of dynamic loading is database.
On the client side you must define parameter url (or call method load()) with a file realizing server-side 'communication'.
On the server side, if you don't write server-side code by yourself and use WebixConnector you should just call the dynamic_loading() method:
Dynamic loading from db. Client-side code
grid = new webix.ui({
...
url:"data/data_dyn.php"
});
Dynamic loading from db. Server-side code
require_once("../../common/config.php");//including the connector file
$data = new JSONDataConnector($conn, $dbtype);//initializing the connector object
$data->dynamic_loading(30);//enabling dynamic loading
$data->render_table("packages_plain","id","package, size, architecture, section");//loading data from the specified database table
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 records starting from the fiftieth one, then you set datafetch:50. 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: Setting polling interval |
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.
To enable the loading screen for DataTable you should call method showOverlay(), to disable it after - hideOverlay().
Using the loading screen in DataTable
grid = new 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 method hideOverlay() , instead of the loading screen you will set the overlay text. 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 server side along with data. In such case your data will look as:
{
config:{
columns:[ ... columns configuration here... ],
... any extra options here, same as in constructor...
},
data:[ ... array of data objects here, as in above samples... ]
}
Read more on the topic in article External configuration.
Back to top