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

【问题标题】：jQuery Datatables json AJAX help pls “No Data Available in Table”jQuery Datatables json AJAX 帮助请“表中没有可用数据”
【发布时间】：2019-01-23 18:30:23
【问题描述】：

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

“表中没有可用数据”。

我的控制器：

public string Lowx()
{
    var query = db.Infos.
            Include(x => x.Profile).
            Include(x => x.Cars).
            ToList();

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

我的观点：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />
    <title>Service</title>
</head>
<body>

    <p>
        <h1 align="center"> Сервис по обслуживанию автомобилей</h1>
        <ul id="nav">

        </ul>
        <a href='@Url.Action("Create")'><img src='/Content/addlow.png' width="40" height="40" /></a>
    </p>
    <table class="table" id="cars">
       <thead>
          <tr>
              <th>Имя</th> //firstname
              <th>Фамилия</th>  //lastname
              <th>Отчество</th> //middlename
              <th>День рождения</th> //birthday
              <th>Марка машины</th> //carname
              <th>гос.номер</th> //carnumber
           </tr>
       </thead>
    </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) {

          // Here is my datatable configuration
          $('#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" },

              ],
        });
     });

 </script>
</body>
</html>

enter image description here

无法弄清楚问题究竟出在哪里。任何帮助将不胜感激。

谢谢。

【问题讨论】：

标签： c# jquery json asp.net-mvc datatables

【解决方案1】：

您有一个 GET 控制器方法，但在您的数据表实现中，您使用 POST 进行 ajax 请求。此外，您可以从控制器返回 JsonResult 而不是 string。这样，MVC 将负责对象的序列化，而您不必显式地进行。

控制器

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

    return Json(query, JsonRequestBehavior.AllowGet);
}

在你的数据表代码中你可以这样称呼它

jQuery

$("#cars").DataTable({
  ajax: {
    url: '@Url.Action("Lowx")',
    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" }
  ]
});

【讨论】：

没有帮助
@АлександрПоляков 我在这里没有看到任何其他问题。您可以检查您的查询是否返回任何数据？如果它显示相同的“无数据”消息，则 db 中可能没有任何数据。

【解决方案2】：

请尝试如下：

在您的控制器中：

[HttpGet]
public ActionResult Lowx()
{
    return View();
}

[HttpPost]
public async Task<ActionResult> LoadDataForDataTable()
{
   var draw = Request.Form.GetValues("draw").FirstOrDefault();
   var start = Request.Form.GetValues("start").FirstOrDefault();
   var length = Request.Form.GetValues("length").FirstOrDefault();

   ///Find sorting column name and order
   var sortColumnName = Request.Form.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() + "][name]").FirstOrDefault();
   var sortColumnDir = Request.Form.GetValues("order[0][dir]").FirstOrDefault();


   int pageSize = length != null ? Convert.ToInt32(length) : 0;
   int skip = start != null ? Convert.ToInt32(start) : 0;
   int recordsTotal = 0;


    var query = db.Infos.
            Include(x => x.Profile).
            Include(x => x.Cars).AsQueryable();

    int recordsTotal = query.Count();

    //Sorting By Individual Column
    if (!(string.IsNullOrEmpty(sortColumnName) && string.IsNullOrEmpty(sortColumnDir)))
    {
       query = query.OrderBy(sortColumnName + " " + sortColumnDir);
    }

    int recordsFiltered = query.Count();

    var data = await query.Skip(skip).Take(pageSize).ToListAsync();
    return Json(new { draw = draw, recordsFiltered = recordsFiltered, recordsTotal = recordsTotal, data = data }, JsonRequestBehavior.AllowGet);
}

然后在jQuery中：

<script type="text/javascript">
     $(document).ready(function (data) {
          // Here is my datatable configuration
          $('#cars').DataTable({
              ajax: {
                  url: '@Url.Action("LoadDataForDataTable")',
                  type: 'POST',
                  dataType: 'application/json',
              },
              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" },

              ],
        });
     });

 </script>

【讨论】：

没有帮助
这是用asp.net mvc实现jQuery Datatable的方法。请检查您的其他相关代码。检查它实际显示的错误并尝试修复它。您也可以在这里分享错误。
没听懂你说的。请询问更多详情。