错误 ajax 错误数据表警告：表 id -example

Question

我点击“确定”并出现控制台错误：

我是编程新手，我需要帮助。我需要使用json 从几个数据结构中形成一个数据表。在这一点上，我被困在这个错误上。帮忙请理解

控制器中的函数是json。

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

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

表格和 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" }
      ]
    });

控制台：加载资源失败：服务器响应状态为 500（内部服务器错误）。

阿尔弗雷德和所有人的屏幕截图）

截图复制粘贴

Answer 1

尝试将此示例复制粘贴到您的视图文件中。当它工作正常时，更改 url 以解析您自己的数据，它应该可以工作。请注意，该操作是 POST，而不是 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

请按如下方式声明DataTable：

$('#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" }
    ]
});

在 Chrome 中，查看Network 选项卡以查看 Ajax 调用是否正确形成。在 Visual Studio 中，在 Lowx() 的开头放置一个 Breakppoint 以查看是否到达代码。请分享您的发现。