無法使用從Parse.com檢索的數據構造DataTable

Question

在我的項目中，我使用Parse.com作爲服務器和數據庫，並使用DataTable插件創建顯示返回數據的表。當我使用預定義的json文件時沒有問題，但是當我嘗試使用從Parse.com返回的數據構造本地json文件時，出現錯誤。看起來不管我做什麼，表創建過程都是先運行的，只有在創建完json object之後才能運行。相關代碼JSfiddle here。請注意，由於大量的代碼，我沒有提供工作示例，但只有相關的部分。

function getDataFromParse(){ 
    console.log("test function run"); 

     var loc_json={ 
      "data":[] 
     }; 
         //get data from parse 
       var parseTable = Parse.Object.extend("parseTable"); 
       var tableObj = new parseTable(); 
       var query = new Parse.Query(parseTable); 
       var count=0; 

       query.descending("createdAt"); 
       query.find({ 
        success: function(resultArr){ 
           console.log("retreiving data from parse"); 
         for(var i=0;i<resultArr.length;i++){ 
           query.get(resultArr[i].id,{ 
            success: function(tableObj){ 
            var ret_phone = tableObj.get("phone"); 
             var ret_first = tableObj.get("firstName"); 
             var ret_last = tableObj.get("lastName"); 
             var ret_status = tableObj.get("redemption_status"); 
             var ret_vipCode = tableObj.get("vipCode"); 

             loc_json.data.push([count,ret_first +" "+ret_last,ret_phone,tableObj.get("createdAt"),ret_vipCode]); //construction of local json 
             count++; 
             console.log("finished fetching data for "+ret_first+" "+ret_last); 
            }, 
            error: function(object, error) { 
             console.log("could not do something "+error.message); 
            } 
           }); 
         } 
         console.log("success function end"); 
        }, 
        error: function(error){ 
         console.log(error.message); 
        } 
       }); 
    console.log("trying to return json"); 
    return loc_json; 
} 



    var rows_selected = []; 
    console.log("table creation"); 
    var table = $('#example').DataTable({ 
     ajax: getDataFromParse(),  // ajax: 'https://api.myjson.com/bins/4qr1g', THIS WORKS!! 
     columns: [ 
     {}, 
     { data: 1}, 
     { data: 2 }, 
     { data: 3 } 
     ], 
     'columnDefs': [{ 
     'targets': 0, 
     'searchable':false, 
     'orderable':false, 
     'className': 'dt-body-center', 
     'render': function (data, type, full, meta){ 
      return '<input type="checkbox">'; 
     } 
     }], 
     'order': [1, 'asc'], 
     'rowCallback': function(row, data, dataIndex){ 
     // Get row ID 
     $('input.editor-active', row).prop('checked', data[3] == 1) 
     var rowId = data[0]; 

     // If row ID is in the list of selected row IDs 
     if($.inArray(rowId, rows_selected) !== -1){ 
      $(row).find('input[type="checkbox"]').prop('checked', true); 
      $(row).addClass('selected'); 
      console.log("table trying to create itself"); 
     } 
     } 
    }); 

Answer 1

SOLUTION

1. 刪除從數據表初始化選項ajax選項。

2. 呼叫getDataFromParse()初始化數據表

3. 在success處理程序每​​次查詢後，替換此行：

   loc_json.data.push([count, ret_first + " " + ret_last, ret_phone, tableObj.get("createdAt"), ret_vipCode]); 
   

   與線下到一個新行添加到表中。

   $('#example').DataTable() 
       .row.add([ 
        count, 
        ret_first + " " + ret_last, 
        ret_phone, 
        tableObj.get("createdAt"), 
        ret_vipCode 
       ]) 
       .draw(false); 
   

DEMO

見this jsFiddle代碼和演示。

NOTES

• 這種解決方案的缺點是新的行會被添加一次，每次查詢成功完成。不知道Parse.com是否有可能在所有查詢完成時處理事件。

• 您的示例使用jQuery DataTable 1.9，但您使用的是1.10中的選項名稱和API。您需要升級您的jQuery DataTables庫。

• 您正在使用ajax選項向jQuery DataTables提供數據，實際上您應該使用data選項。

• 在// FOR TESTING ONLY之後刪除代碼，因爲僅在jQuery DataTables - Row selection using checkboxes文章中需要演示，因此不需要進行生產。