Error ajax error-datatables warning: table id -example

Question

I click "ok" and in console error :

I'm new to programming and I need help. I need to use json to form a datatable from several data structures. At this point, I'm stuck on this error. Help please understand

The function in the controller is json.

[HttpGet]
            public JsonResult Lowx()
            {
                var query = db.Infos.
                    Include(x => x.Profile).
                    Include(x => x.Cars).
                    ToList();

                return Json(new { data = query });
            }

table and ajax

 <table class= "table" id="example" >
            <thead>
                <tr >
                    <th>first name</th>
                    <th>last name</th>
                    <th>middle name</th>
                    <th>birthday</th>
                    <th>carname</th>
                    <th>carnumber</th>
                </tr>
            </thead>
            <tbody></tbody>

        </table>

        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
        <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function (data) {
             $("#example").DataTable({
      ajax: {
          url: '@Url.Action("Lowx")',
          type: 'GET',

          dataSrc: ""

      },
      columns: [
        { data: "FirstName", name: "FirstName" },
        { data: "LastName", name: "LastName" },
        { data: "MiddleName", name: "MiddleName" },
        { data: "BirthDate", name: "BirthDate" },
        { data: "CarName", name: "CarName" },
        { data: "CarNumber", name: "CarNumber" }
      ]
    });

Console: Failed to load resource: the server responded with a status of 500 (Internal Server Error).

SCREENSHOTS FOR ALFRED AND ALL)

Screenshot copy-paste

Answer 1

Try copy-pasting this example in your view file. When it works fine, change the url to parse your own data and it should work. Note that the action is a POST, not a GET.

[HttpPost]
public JsonResult Lowx()
{
    var query = db.Infos.Include(x => x.Profile).Include(x => x.Cars).ToList();
    return Json(new { data = query });
}

http://jsfiddle.net/bababalcksheep/ntcwust8/

$(document).ready(function () {
    var url = 'http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2';
    var table = $('#example').DataTable({
        'processing': true,
        'serverSide': true,
        'ajax': {
        'type': 'POST',
        'url': url,
        'data': function (d) {
            return JSON.stringify( d );
        }
     }
  });
  $('#reload').click(function (e) {
      table.ajax.reload();
  });
  $('.toggleCols').click(function (e) {
      e.preventDefault();
      var column = table.column( $(this).attr('data-column') );
      column.visible( ! column.visible() );
  });    
});

Answer 2

Please declare the DataTable as follows:

$('#example').DataTable({
    "ajax": {
        "url": '@Url.Action("Lowx")',
        "dataSrc": ""
    },
    "columns": [
        { "FirstName", "data.Profile.FirstName" },
        { "LastName", "data.Profile.LastName" },
        { "MiddleName", "data.Profile.MiddleName" },
        { "BirthDate", "data.Profile.BirthDate" },
        { "CarName", "data.Cars.CarName" },
        { "CarNumber", "data.Cars.CarNumber" }
    ]
});

In Chrome, look at the Network tab to see if the Ajax call was formed properly. In Visual Studio, put a Breakppoint at the beginning of Lowx() to see if you reach the code. Please share your findings.