Datatables AJAX請求 - 未知長度

Question

一段時間以來一直在爲此苦苦掙扎。試圖讓我的數據表來填充，但我遇到了以下錯誤：

Uncaught TypeError: Cannot read property 'length' of undefined 
    at jquery.dataTables.min.js:48 
    at i (jquery.dataTables.min.js:35) 
    at Object.success (jquery.dataTables.min.js:35) 
    at i (jquery-3.1.1.min.js:2) 
    at Object.fireWith [as resolveWith] (jquery-3.1.1.min.js:2) 
    at A (jquery-3.1.1.min.js:4) 
    at XMLHttpRequest.<anonymous> (jquery-3.1.1.min.js:4) 

一切我可以告訴具有正確的格式因此必須有我丟失的東西。有什麼東西跳出來嗎？

這是我的HTML的樣品

<table id="myGrid" class="table"> 
        <thead> 
         <tr> 
          <th>CarPrefix</th> 
          <th>CarNumber</th> 
          <th>CarDesc</th> 
          <th>CarScreenDesc</th> 
          <th>CarSummaryDesc</th> 
          <th>CarColorDesc</th> 
          <th>CarCodeComputed</th> 
          <th>CarStatusDesc</th> 
         </tr> 
        </thead> 

這是我的AJAX請求：

$('#myGrid').DataTable({ 
     ajax: '/populatecardata', 
     dataSrc: 'data', 
     columns: [ 
      { data:"CarPrefix" }, 
      { data: "CarNumber" }, 
      { data: "CarDesc" }, 
      { data: "CarScreenDesc" }, 
      { data: "CarSummaryDesc" }, 
      { data: "CarColorDesc" }, 
      { data: "CarCodeComputed" }, 
      { data: "CarStatusDesc" } 
     ] 
    }); 

我控制器

Route("populatecardata"), HttpGet] 

     public object getTableData() 
     { 

       using (CarEntities ce = new CarEntities()) 
       { 

       PopulateData pd = new PopulateData(); 
       var resultsList = pd.GetTableData(ce);    
       return resultsList; 

       } 


     } 

和我的方法提取數據：

public object GetTableData(CarEntities ce) 
     { 
       Data ltr = new Data(); 
       resultsList = ce.CarData.Take(1).ToList(); 
       foreach(var result in resultsList) 
      { 
       TableResults tr = new TableResults(); 
       tr.CarPrefix = result.CarPrefix; 
       tr.CarNumber = result.CarNumber; 
       tr.CarDesc = result.CarDesc; 
       tr.CarScreenDesc = result.CarScreenDesc; 
       tr.CarSummaryDesc = result.CarSummaryDesc; 
       tr.CarColorDesc = result.CarColorDesc; 
       tr.CarCodeComputed = result.CarCodeComputed; 
       tr.CarStatusDesc = result.CarStatusDesc; 
       tr.CarStatusDesc = "TestStatus"; 
       ltr.jsondata.Add(tr); 

      } 
      var jsonObject = JsonConvert.SerializeObject(ltr); 
      return jsonObject; 

     } 

     public class Data 
     { 
      [JsonProperty("data")] 
      public List<TableResults> jsondata { get; set; } 
      public Data() 
      { 
       jsondata = new List<TableResults>(); 
      } 
     } 




     public class TableResults 
     { 
      [JsonProperty("CarPrefix")] 
      public string CarPrefix { get; set; } 

      [JsonProperty("CarNumber")] 
      public string CarNumber { get; set; } 

      [JsonProperty("CarDesc")] 
      public string CarDesc { get; set; } 

      [JsonProperty("CarScreenDesc")] 
      public string CarScreenDesc { get; set; } 

      [JsonProperty("CarSummaryDesc")] 
      public string CarSummaryDesc { get; set; } 

      [JsonProperty("CarColorDesc")] 
      public string CarColorDesc { get; set; } 

      [JsonProperty("CarCodeComputed")] 
      public string CarCodeComputed { get; set; } 

      [JsonProperty("CarStatusDesc")] 
      public string CarStatusDesc { get; set; } 


     } 
    } 

和樣品JSON對象：

{ 
    "data": [ 
     { 
      "CarPrefix": "ty", 
      "CarNumber": "1009", 
      "CarDesc": "Toyota 2009 4Cylinder FWD", 
      "CarScreenDesc": "4CY-Toyota", 
      "CarSummaryDesc": "Toyota 2009", 
      "CarColorDesc": "Red", 
      "CarCodeComputed": "ty1009", 
      "CarStatusDesc": "Available" 
     } 
    ] 
} 

Answer 1

去如果你知道如何使用Chrome或IE調試器調試命令，你可以這樣做通過這種方式可以更好地瞭解發生了什麼問題：

$('#myGrid').DataTable({ 
    ajax:{ 
     url: '/populatecardata', 
     dataFilter: function(dtData) { 
      debugger; 
      console.log(dtData); 
      return dtData; 
     }, 
     error: function(err, status){ 
      debugger; 
      console.log(err); 
     } 

    }, 
columns: [ 
    { data:"CarPrefix" }, 
    { data: "CarNumber" }, 
    { data: "CarDesc" }, 
    { data: "CarScreenDesc" }, 
    { data: "CarSummaryDesc" }, 
    { data: "CarColorDesc" }, 
    { data: "CarCodeComputed" }, 
    { data: "CarStatusDesc" } 
] 
});  

Answer 2

你的數據表的語法是關閉一點。

$('#myGrid').DataTable({ 
    ajax:{url: '/populatecardata', 
      dataSrc: 'data'}, 
    columns: [ 
     { data:"CarPrefix" }, 
     { data: "CarNumber" }, 
     { data: "CarDesc" }, 
     { data: "CarScreenDesc" }, 
     { data: "CarSummaryDesc" }, 
     { data: "CarColorDesc" }, 
     { data: "CarCodeComputed" }, 
     { data: "CarStatusDesc" } 
    ] 
}); 

然而，DATASRC默認爲「數據」，所以實際上你可以刪除它，並用

$('#myGrid').DataTable({ 
    ajax: '/populatecardata', 

    columns: [ 
     { data:"CarPrefix" }, 
     { data: "CarNumber" }, 
     { data: "CarDesc" }, 
     { data: "CarScreenDesc" }, 
     { data: "CarSummaryDesc" }, 
     { data: "CarColorDesc" }, 
     { data: "CarCodeComputed" }, 
     { data: "CarStatusDesc" } 
    ] 
});