带有 MVC 问题的 jQuery 数据表

Question

在将 Datatables 与 MVC 一起使用时，我收到错误 Requested unknown parameter '0' for row 0, column 0。

我的用例是我想从 MVC 控制器返回 JSON 数据，但我可以将所有排序功能分页留在客户端上，因为我只会返回大约 100 行

我的代码如下：

public ActionResult LoadCarData()
{
  // will really come from DB just mocked for now
  var carData = new List<CarData>(new[]
  {
            new CarData { DT_RowId = "row_1", // will really have a CarId in the DB and I want to concatenate that to make each row have the id from the db
                            Manufacturer = "BMW",
                            Model = "3 Series",
                            Colour = "Red",
                            EngineSize = 3.0M,
                          },
            new CarData { DT_RowId = "row_2",
                            Manufacturer = "Mercedes",
                            Model = "C Class",
                            Colour = "White",
                            EngineSize = 2.5M,
                          },
            new CarData { DT_RowId = "row_3",
                            Manufacturer = "Audi",
                            Model = "A5",
                            Colour = "Black",
                            EngineSize = 2.0M,
                          }
        });

  return Json(new
  {
    aaData = carData
  }, JsonRequestBehavior.AllowGet);
}

我的 CarData 类如下：

  public class CarData
  {
    public string DT_RowId { get; set; } 
    public string Manufacturer { get; set; }
    public string Model { get; set; }
    public string Colour { get; set; }
    public decimal? EngineSize { get; set; }
  }

我有一个对我的 MVC 控制器的 ajax 调用，如下所示（注意 DataTable 中的第一列是一个复选框，允许用户选择该行：

  $.ajax({
        url: '@Url.Action("LoadCarData", "Car")',
        type: 'GET',
        dataType: 'json',
        success: function (data) {
          console.log(data);
          $('#carData').dataTable({
            bProcessing: true,
            aaData: data.aaData,
            columnDefs: [
              { orderable: false, className: 'select-checkbox', targets: 0 },
            ],
            select: {
              style: 'multi',
              selector: 'td:first-child'
            },
            order: [[1, 'asc']]
          });
        }
      });

我的表格 HTML 如下：

<table id="carData" class="display" cellspacing="0" style="width:100%">
  <thead>
    <tr>
      <th></th>
      <th>Manufacturer</th>
      <th>Model</th>
      <th>Colour</th>
      <th>EngineSize</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

最后，在 Chrome 的 DevTools 的 Network 选项卡中，我可以看到返回的 JSON 数据如下：

{
    "aaData": [{
        "DT_RowId": "row_1",
        "Manufacturer": "BMW",
        "Model" = "3 Series",
        "Colour": "Red",
        "EngineSize": 3.0,
    }, {
        "DT_RowId": "row_2",
        "Manufacturer": "Mercedes",
        "Model" = "C Class",
        "Colour": "White",
        "EngineSize": 2.5,
    }, {
        "DT_RowId": "row_3",
        "Manufacturer": "Audi",
        "Model" = "A5",
        "Colour": "Black",
        "EngineSize": 2.0,
    }]
}

为了正确输出每一行呈现为来自数据库的行的 rowId，我做错了什么吗？

Answer 1

我是初学者，只是想提供帮助。看看你是否至少得到表格数据。可以试试下面的sn-p吗：

  $.ajax({
    url: '@Url.Action("LoadCarData", "Car")',
    type: 'GET',
    dataType: 'json',
    success: function (data) {
      console.log(data);
      $('#carData').dataTable({
        columns: [
          { data: "data.aaData" }
        ]
      });
    }
  });

或者类似下面的东西

尝试用以下替换数据

attempt 1: data: "data.aaData.Model"
attempt 2: data : "aaData.Model"
attempt 3: data : "aaData"