2012-09-05 47 views
0

我一直在嘗試,但不成功,以獲得一個yui3數據表通過json調用正確填充。我很沮喪,希望有人能告訴我我的方式錯誤。無論我嘗試過什麼,我只是「沒有數據可顯示」。YUI3 datatable使用JSON使用Plugin.DataTableDataSource時不呈現數據

當我在頁面加載期間運行wireshark時,我看到從ajax調用返回的json數據。所以我認爲我有正確的數據表綁定到數據表。請注意,我感興趣的數據記錄與元數據嵌套,看起來我的DataSourceJSONSchema定義是正確的。

這是來自ajax調用的http響應。

YUI.Env.DataSource.callbacks.yui_3_6_0_1_1346868215546_114({ 
"recordsReturned":4,"startIndex":0,"dir":"asc","pageSize":10, 
"records":[ 
    {"id":"48ee0540-ebd7-11e1-33e-c33ce39c9e", "email":"[email protected]","name":"James"}, 
    {"id":"1447ea60-eca2-11e1-33e-f6c33ce39c9e", "email":"[email protected]","name":"John"}, 
    {"id":"48ff6a60-ebd7-11e1-a33e-f6c33ce39c9e", "email":"[email protected]","name":"Ryan"}, 
    {"id":"1a298060-f774-11e1-ad38-f6c33ce39c9e", "email":"[email protected]","name":"Vince"}]}) 

這是html頁面。

<script type="text/javascript"> 
YUI({ 
lang : "en-US" 
}) 
.use("datatable","datatype","datasource",function(Y) { 
var ajaxData; 
function ajaxSuccess(e) { 
ajaxData = e.data; 
} 
} 
function ajaxFailure(e) { 
    Y.log("failure"); 
} 

var myDataSource = new Y.DataSource.Get({ 
    source : "/actions/User.action?getAjaxUserList=&" 
}); 

myDataSource.plug(Y.Plugin.DataSourceJSONSchema,{ 
    schema : { 
     metaFields : { 
      recordsReturned : "recordsReturned", 
      startIndex : "startIndex", 
      dir : "dir", 
      pageSize : "pageSize" 
     }, 
     resultsListLocator : "records", 
     resultFields : [ { 
     key : 'id'}, { 
     key : 'email'},{ 
     key : 'name' }}}); 

    var table = new Y.DataTable({ 
    columns : [ { 
    key : "id", 
    label : "ID" 
    }, { 
    key : "name", 
    label : "Name"}, { 
    key : "email", 
    label : "Email"} ], 
    caption : "My first DataTable!", 
    summary : "Example DataTable showing basic instantiation configuration" 
            }); 
    table.plug(Y.Plugin.DataTableDataSource, {datasource : myDataSource}); 

    table.render('#dynamicdata'); 
    table.datasource.load({request : encodeURIComponent('fred=steve')}); 
         }); 
    </script> 

    <div id="dynamicdata"></div> 

回答

2

我對你給這裏的代碼,發現好幾個語法錯誤: 函數(Y)回調例如太早關閉。

我認爲你的錯誤是由於你在你的數據源模式中設置了屬性「resultsListLocator」而不是「resultListLocator」。