DataTable 不基于从 AJAX 调用接收到的 JSON 数据呈现答案

【问题标题】：DataTable not rendering based on JSON data received from AJAX callDataTable 不基于从 AJAX 调用接收到的 JSON 数据呈现
【发布时间】：2017-11-07 07:05:52
【问题描述】：

我想将表中的数据加载到 jQuery DataTable 中。为此，我应用了以下代码：

HTML

@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
</head>
<body>
    <div style="width:90%;margin:0 auto">
        <table id="mydatatable">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Id</th>
                <th>City</th>
                <th>Country</th>
            </tr>
        </table>
    </div>
    <script src="~/scripts/jquery-3.2.1.min.js"></script>
    <script src="~/scripts/jquery.validate.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="~/scripts/jquery-ui-1.12.1.min.js"></script>
    <script>
        $document.ready(function () {
            var oTable = $("mydatatable").DataTable({
                "ajax": {
                    url: "/Home/GetEmployees",
                    type: "get",
                    database: "json"
                },
                "columns": [
                    { "data": "FirstName", "autowidth": true },
                    { "data": "LastName", "autowidth": true },
                    { "data": "EmailId", "autowidth": true },
                    { "data": "City", "autowidth": true },
                    { "data": "Country", "autowidth": true }
                ]
            });
        });
    </script>
</body>
</html>

控制器

using MVC_CRUD.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;


namespace MVC_CRUD.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetEmployees() {
            using (MvcCRUDDBEntities dc = new MvcCRUDDBEntities()) {
                var employees = dc.Employees.OrderBy(a => a.FirstName).ToList();
                return Json(new { data = employees }, JsonRequestBehavior.AllowGet);
            }
        }
    }
}

我在“//Home/GetEmployees”中收到的数据是：

{"data":[{"EmployeeId":4,"FirstName":"Ankit","LastName":"Agarwal","EmailId":"ankit@xyz.com","City":"Pune ","Country":"India     "},{"EmployeeId":2,"FirstName":"Niraj","LastName":"Desai","EmailId":"niraj@xyz.com","City":"Bilimora ","Country":"India     "},{"EmployeeId":1,"FirstName":"Pratik","LastName":"Soni","EmailId":"pratik@xyz.com","City":"Valsad ","Country":"India     "},{"EmployeeId":3,"FirstName":"Shezad","LastName":"Khan","EmailId":"shezad@xyz.com","City":"Manglore ","Country":"India     "}]}

但是当我运行应用程序时，DataTable 没有任何数据：

我想要的是数据应该在应用程序启动时加载到 DataTable 中。我尝试了 StackOverflow 上可用的一些现有解决方案，但没有一个对我有帮助。

更新：在调试时我发现在 HomeController.cs 文件中的“GetEmployees”方法不是事件被调用。

【问题讨论】：

你的js表初始化应该是$("#mydatatable").DataTable而不是$("mydatatable").DataTable
@i3lai3la：我通过更新代码进行了尝试。但它仍然无法正常工作。
不要根据答案更改问题中的代码（它会使答案无效）
@StephenMuecke：当然，下次会记住的。谢谢。
Ali Soltani 是正确的，你必须做出改变。如果仍然无法正常工作，您在浏览器控制台中遇到了什么错误？

标签： asp.net-mvc jquery-ui datatables datatables-1.10

【解决方案1】：

您需要编辑以下代码：

var oTable = $("mydatatable").DataTable

到

var oTable = $("#mydatatable").DataTable

因为你有table 和id="mydatatable"。要在 jQuery 中通过 id 获取此元素，您需要在 id 之前使用 #。

更新

客户端

您需要添加以下选项以从服务器获取数据：

oTable = $('#mydatatable').dataTable({  
       "bServerSide": true, 
        ...
    });

服务器端

return Json(new {
 data = employees.Select(e => new {
  FirstName = e.FirstName,
   LastName = e.LastName,
   StatusLU = e.StatusLU,
   EmailId = e.EmailId,
   City = e.City,
   Country = e.Country
 })
}, JsonRequestBehavior.AllowGet);

【讨论】：

我通过更新代码进行了尝试。但它仍然无法正常工作。无论如何，我也在根据我的问题中的这个建议更新我的代码。

【解决方案2】：

试试这个：

var draw = Request.Form.GetValues("draw").FirstOrDefault();

return Json(new 
       { draw = draw, 
         recordsFiltered = recordsTotal, 
         recordsTotal = recordsTotal,  //1000
         data = employees 
      }, JsonRequestBehavior.AllowGet);

更新：我发现你在属性中使用了数据库，这似乎是错误的。

var oTable = $("#mydatatable").DataTable({

                "processing": true,  //update
                "serverSide": true, //update

                "ajax": {
                    url: "/Home/GetEmployees",
                    type: "get",
                    datatype: "json" //review this
                },
                "columns": [
                    { "data": "FirstName", "name": "FirstName", "autowidth": true },
                    { "data": "LastName", "name": "LastName",  "autowidth": true },
                    { "data": "EmailId", "name": "EmailId",  "autowidth": true },
                    { "data": "City", "name": "City",  "autowidth": true },
                    { "data": "Country", "name": "Country",  "autowidth": true }
                ]
            });

【讨论】：

嗨，我已经尝试了您在上述答案中分享的内容，但它不起作用。它仍然给我同样的结果。以及您的审查建议，即数据类型“json”，我已经对其进行了交叉检查，并且符合预期。
看到这个：stackoverflow.com/questions/30908906/…
不，链接的答案没有帮助。
“错误”属性只是被忽略，它们不会导致请求失败。