Question

我有一个用$( document ).ready函数制成的表。我也在使用jQuery DataTables插件。由于某种原因，当页面加载时，表加载，但是第一行显示：

“表中没有可用数据”。

这是我的控制器：

  public string Lowx()
        {
            var query = db.Infoes.
                Include(x => x.Profile).
                Include(x => x.Car).

                ToList();

return JsonConvert.SerializeObject(query.ToList());

这是我的Ajax函数：

 $(document).ready(function (data) {

          $('#cars').DataTable({


              ajax: {
                  url: '@Url.Action("lowx")',
                  type: 'POST',
                  dataType: 'json',
                  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" },

              ],




    });
});

数据表写入：

enter image description here

Answer 1

看看https://datatables.net/examples/ajax/objects.html。期望一个对象具有一个名为“ data”的数组属性，其中包含数据，而不是一个直接数组。

还

（a）您的控制器操作正在返回一个字符串。您应该返回JsonResult来为您进行序列化（并适当设置mime类型等）。

public JsonResult Lowx()
{
    var query = db.Infoes.
        Include(x => x.Profile).
        Include(x => x.Car).
        ToList();

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

理想情况下，您应该只获取所需的数据，而不是检索表中的所有列。这完全是对您的架构的猜测，但是...

public JsonResult Lowx()
{
    var query = db.Infoes.
        Select(x => new()
        {
            FirstName = x.Profile.FirstName,
            LastName = x.Profile.LastName,
            MiddleName = x.Profile.MiddleName,
            BirthDate = x.Profile.BirthDate,
            CarName = x.Car.CarName,
            CarNumber = x.Car.CarNumber
        });

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

（b）为什么使用POST请求检索数据？

Answer 2

尝试此代码：

javascript：

  $('#cars').dataTable({
    responsive: true,
    "searching": true,
    "scrollCollapse": true,
    dom: 'Blrtip',
    "processing": true,
    "serverSide": true,
    "ajax": $('#cars').data('source'),
    "pagingType": "simple_numbers",
     "columns": [
                  { data: "FirstName"},
                  { data: "LastName"},
                  { data: "MiddleName"},
                  { data: "BirthDate"},
                  { data: "CarName",
                  { data: "CarNumber"},

              ], 
  });

html代码：

<table id="cars" data-source="lowx">
          <thead>
            <tr role="row">
              <th>first name</th>
              .....
              <th>car number</th>
            </tr>
          </thead>
          <tbody> 
          </tbody>
      </table>

Answer 3

访问此网址以获取更多信息：https://datatables.net/reference/api/ajax.url().load()

  var table = $('#example').DataTable( {
        ajax: "data.json"
    } );

    table.ajax.url( 'newData.json' ).load();

jQuery Datatables json AJAX帮助请“表中没有可用数据”

3 个答案: