Question

我有一个在$（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

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

谢谢。

Answer 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" }
  ]
});

Answer 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>

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

2 个答案: