YUI Datatable - “Data Error.”
-
14-10-2019 - |
Question
I'm trying to make a datatable using YUI with JSON returned data.
Included is the json returned data, and the page data displayed.
JSON Data:
[{"supplier_id":"127","name":"Adams Farms","description":"","ofarm":"1","active":"1"},{"supplier_id":"141","name":"Barriger Farms","description":"","ofarm":"1","active":"1"}]
Javascript for YUI:
<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.JSON = function() {
var myColumnDefs = [
{key:"supplier_id", label:"ID"},
{key:"name", label:"Name"},
{key:"description", label:"Notes"},
{key:"ofarm", label:"Ofarm"},
{key:"active", label:"Active"}
];
var myDataSource = new YAHOO.util.DataSource("ajax/select/supplier");
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.responseSchema = {
fields: ["supplier_id","name","description","ofarm","active"]
};
var myDataTable = new YAHOO.widget.DataTable("json", myColumnDefs,
myDataSource);
return {
oDS: myDataSource,
oDT: myDataTable
};
}();
});
</script>
Page View:
YUI Test (header)
This example populates a DataTable with data. (intro text)
ID - Name - Notes - Ofarm - Active (column titles)
Data error. (returned data)
Solution
According to YUI dataSource page, YUI dataSource expectes an JavaScript object, not an array of objects. And when using JSON, use must set a resultsList on the responseSchema property. Something as (Notice dataSourceSettings.responseSchema.fields property)
(function() {
var YdataTable = YAHOO.widget.DataTable,
YdataSource = YAHOO.util.DataSource;
var settings = {
container:"<DATATABLE_CONTAINER_GOES_HERE>",
source:"<URL_TO_RETRIEVE_YOUR_DATA>",
columnSettings:[
{key:"supplier_id", label:"ID"},
{key:"name", label:"Name"},
{key:"description", label:"Notes"},
{key:"ofarm", label:"Ofarm"},
{key:"active", label:"Active"}
],
dataSourceSettings:{
responseType:YdataSource.TYPE_JSON,
responseSchema:{
resultsList:"<DOT_NOTATION_LOCATION_TO_RESULTS>",
fields:[
{key:"supplier_id"},
{key:"name"},
{key:"description"},
{key:"ofarm"},
{key:"active"}
]
}
},
dataTableSettings:{
initialLoad:false
}
}
var dataTable = new YdataTable(
settings.container,
settings.columnSettings,
new YdataSource(
settings.source,
settings.dataSourceSettings),
settings.dataTableSettings);
})();
OTHER TIPS
As a side note, I found this page when looking for the cause of "Data error" in a YUI datatable, and I eventually found out that I was missing the /build/connection/connection-min.js script reference on my web page.