jQuery Datatables with MVC Issue

Question

I am getting an error Requested unknown parameter '0' for row 0, column 0 when using Datatables with MVC.

My Use case is that I want to return JSON Data from an MVC Controller but I am fine with leaving all the sorting functionality pagination on the client as I will only ever be returning approx 100 rows

My Code is as below:

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);
}

My CarData class is as below:

  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; }
  }

I have an ajax call to my MVC controller as below (note the first column in the DataTable is a checkbox to allow the user to select that row:

  $.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']]
          });
        }
      });

My table HTML is as below:

<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>

Finally, in the Network Tab of DevTools in chrome I can see the returned JSON data as below:

{
    "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,
    }]
}

Is there something I am doing wrong in order to correctly output the rowId for each row rendered as that coming from the DB?

Answer 1

I am a beginner, just trying to help. Just see if you get the tabular data atleast. Can you try below snippet:

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

Or something like below

Try replacing data with below

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