无法使用从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文章中需要演示，因此不需要进行生产。