将JSON数据填充到YUI DataTable时“无数据显示”

时间:2012-11-20 03:22:10

标签: javascript json yui

我是YUI的新手,找不到如何解决这个问题。我正在使用YUI示例中的代码并尝试使其适用于我的json url ..

<div id="pizza" class="yui3-skin-sam dt-example"></div>
<script>
YUI().use("datasource-get", "datasource-jsonschema", "datatable-base-deprecated", "datatable-datasource-deprecated", function (Y) {

var url = "http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=demo",
dataSource,
table;

dataSource = new Y.DataSource.Get({ source: url });

dataSource.plug(Y.Plugin.DataSourceJSONSchema, {
schema: {
    resultListLocator: "geonames",
    resultFields: ["fcodeName", "toponymName", "countrycode", "fcl", "fclName", "name", "wikipedia", "lng", "fcode", "geonameId", "lat", "population"]
}
});

table = new Y.DataTable.Base({
columnset: ["fcodeName", "toponymName", "countrycode", "fcl", "fclName", "name", "wikipedia", "lng", "fcode", "geonameId", "lat", "population"]    });

table.plug(Y.Plugin.DataTableDataSource, { datasource: dataSource });

table.render("#pizza");

table.datasource.load({ request: url });
});
</script>

我的json回复是

{"geonames":[{"fcodeName":"capital of a political entity","toponymName":"Mexico City","countrycode":"MX","fcl":"P","fclName":"city, village,...","name":"Mexiko-Stadt","wikipedia":"","lng":-99.12766456604,"fcode":"PPLC","geonameId":3530597,"lat":19.428472427036,"population":12294193}, same pattern....]}

我想我错过了一些基本概念。如果这个问题毫无意义,我道歉。

1 个答案:

答案 0 :(得分:3)

以下是您需要的Javascript代码。你可以用这个小提琴来测试它:http://jsfiddle.net/tppiotrowski/pfHAm/

YUI().use("datasource-get", "datasource-jsonschema", "datatable-base-deprecated", "datatable-datasource-deprecated", function (Y) {

var url = "http://api.geonames.org/citiesJSON?",
    query = "north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=test1",
    dataSource,
    table;

dataSource = new Y.DataSource.Get({ source: url });

dataSource.plug(Y.Plugin.DataSourceJSONSchema, {
    schema: {
        resultListLocator: "geonames",
        resultFields: ["fcodeName", "toponymName", "countrycode", "fcl", "fclName", "name", "wikipedia", "lng", "fcode", "geonameId", "lat", "population"]
    }
});

table = new Y.DataTable.Base({
    columnset: ["fcodeName", "toponymName", "countrycode", "fcl", "fclName", "name", "wikipedia", "lng", "fcode", "geonameId", "lat", "population"]    
});

table.plug(Y.Plugin.DataTableDataSource, { datasource: dataSource });

table.render("#pizza");

table.datasource.load({ request: query });
});​