title: Core 2 MVC with JQuery Datatables
body: <p>There is a good example on how to use JQuery Datatables with Core MVC at <a href="http://www.c-sharpcorner.com/article/using-jquery-datatables-grid-with-asp-net-core-mvc/" rel="nofollow noreferrer">Using jQuery DataTables Grid With ASP.NET CORE MVC</a></p>
  
  <p>I download the sample project, made some modifications and it works perfectly. </p>
  
  <p>However, I'm getting an error when I try to integrate this into my project.</p>
  
  <blockquote>
    <p>DataTables warning: table id=example - Requested unknown parameter 'IdStudent' for row 0, column 0. For more information about this error, please see <a href="http://datatables.net/tn/4" rel="nofollow noreferrer">http://datatables.net/tn/4</a></p>
  </blockquote>
  
  <p>After I click ok on the error, the table generates with the correct number of rows, but with no data:</p>
  
  <p><a href="https://i.stack.imgur.com/zA6u4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zA6u4.png" alt="enter image description here"></a></p>
  
  <p>This is my class:</p>
  
  <pre><code>public class GridStudent
  {
      [Key]
      public int IdStudent { get; set; }
      public string Name { get; set; }
      public string LastName { get; set; }
  }
  </code></pre>
  
  <p>The HTML and JavaScript:</p>
  
  <pre><code>    &lt;div class="container"&gt;
      &lt;br /&gt;
      &lt;div style="width:90%; margin:0 auto;"&gt;
          &lt;table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;IdStudent&lt;/th&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;LastName&lt;/th&gt;
                      &lt;th&gt;Edit&lt;/th&gt;
                      &lt;th&gt;Delete&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script&gt;
  
      $(document).ready(function ()
      {
          $("#example").DataTable({
              "processing": true, // for show progress bar
              "serverSide": true, // for process server side
              "filter": true, // this is for disable filter (search box)
              "orderMulti": false, // for disable multiple column at once
              "ajax": {
                  "url": "/StudentGrid/LoadData",
                  "type": "POST",
                  "datatype": "json"
              },
              "columnDefs":
              [
                  {
                      "targets": [0],
                      "visible": false,
                      "searchable": false,
                  }
              ],
              "columns": [
                  { "data": "IdStudent", "name": "IdStudent", "autoWidth": true },
                  { "data": "Name", "name": "Name", "autoWidth": true },
                  { "data": "LastName", "name": "LastName", "autoWidth": true },
                  {
                      "render": function (data, type, full, meta)
                      { return '&lt;a class="btn btn-info" href="/StudentGrid/Edit/' + full.IdStudent + '"&gt;Edit&lt;/a&gt;'; }
                  }
                  ,
                  {
                      data: null, render: function (data, type, row)
                      {
                          return "&lt;a href='#' class='btn btn-danger' onclick=DeleteData('" + row.IdStudent + "'); &gt;Delete&lt;/a&gt;";
                      }
                  },
              ]
          });
      });
  
      function DeleteData(CustomerID)
      {
          if (confirm("Are you sure you want to delete ...?"))
          {
              Delete(CustomerID);
          }
          else
          {
              return false;
          }
      }
  
     function Delete(CustomerID)
     {
          var url = '@Url.Content("~/")' + "StudentGrid/Delete";
  
          $.post(url, { ID: CustomerID }, function (data)
              {
                  if (data)
                  {
                      oTable = $('#example').DataTable();
                      oTable.draw();
                  }
                  else
                  {
                      alert("Something Went Wrong!");
                  }
              });
     }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the line of code, from the controller, than returns the data:</p>
  
  <pre><code>return await Task.Run(() =&gt; Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data }));
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/6abQV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6abQV.png" alt="enter image description here"></a></p>
  
  <p>As you can see from the image, the controller is returning the data correctly, but for some reason DataTables can't read it.</p>
  
  <p>I cross check with the sample a thousand times and I can't see a difference on the format of the data being return.</p>
  
  <p>Any suggestions?</p>