Question

在我的项目中，我使用Parse.com作为服务器和数据库，使用DataTable插件创建一个显示返回数据的表。使用预定义的json文件时没有问题，但是当我尝试使用从json返回的数据构建本地Parse.com文件时，我收到错误消息。似乎无论我做什么，表创建过程都是先运行，然后才创建json object。

JS使用相关代码编写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

<强>解

从DataTables初始化选项中删除ajax选项。
初始化DataTable后调用getDataFromParse()

在每个查询的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);

<强>样本

请参阅this jsFiddle以获取代码和演示。

备注

此解决方案的缺点是每次查询成功完成后都会添加一个新行。不确定Parse.com是否可以在所有查询完成后处理事件。

您的示例使用jQuery DataTables 1.9，但您使用的是1.10中的选项名称和API。您需要升级jQuery DataTables库。

您使用ajax选项向jQuery DataTables提供数据实际上您应该使用data选项。

删除// FOR TESTING ONLY之后的代码，因为仅在jQuery DataTables - Row selection using checkboxes文章中需要进行演示，而且不需要进行制作。

无法使用从Parse.com检索到的数据构建DataTable

1 个答案: