微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

DataTables 警告,为第 0 行、第 0 列请求未知参数“CustomerID”

如何解决DataTables 警告,为第 0 行、第 0 列请求未知参数“CustomerID”

我正在尝试使用 MysqL 项目在我的 MVC ASP.NET Core 中实现数据表,所以我遵循了分步教程,但我无法修复此错误

" DataTables 警告:table id=tblCustomers - 为第 0 行、第 0 列请求未知参数“CustomerID”。有关此错误的详细信息,请参阅 http://datatables.net/tn/4 "

这是我的 HTML 视图页面

<html>
<head>
    <Meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <div style="width: 500px">
        <table id="tblCustomers" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse">
            <thead>
                <tr>
                    <th>Customer Id</th>
                    <th>Name</th>
                    <th>City</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",url: "/Home/AjaxMethod",data: '{}',contentType: "application/json; charset=utf-8",dataType: "json",success: OnSuccess,failure: function (response) {
                    alert(response.d);
                },error: function (response) {
                    alert(response.d);
                }
            });
        });
        function OnSuccess(response) {
            $("#tblCustomers").DataTable(
                {
                    bLengthChange: true,lengthMenu: [[5,10,-1],[5,"All"]],bFilter: true,bSort: true,bPaginate: true,data: response,columns: [{ 'data': 'CustomerID' },{ 'data': 'ContactName' },{ 'data': 'City' },{ 'data': 'Country' }]
                });
        };
    </script>
</body>
</html>

这是我的控制器:

public class HomeController : Controller
    {
        private DBCtx Context { get; }
        public HomeController(DBCtx _context)
        {
            this.Context = _context;
        }

        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult AjaxMethod()
        {
            var customers = Context.Customers.ToList();

            return Json(JsonConvert.SerializeObject(customers));
        }
    }

我的 AjaxMethod 正在返回:

Newtonsoft.Json.JsonConvert.SerializeObject 返回 "[{"CustomerID":1,"ContactName":"Lucas","City":"Jundiai","Country":"Brasil"},{"CustomerID": 2,"ContactName":"Vitoria","City":"Jundaii",{"CustomerID":3,"ContactName":"Soutto","国家":"巴西"}]" 字符串

解决方法

首先,您需要将 AjaxMethod 更改为:

 [HttpPost]
    public IActionResult AjaxMethod()
    {
        var customers = Context.Customers.ToList();

        return Json(customers);
    }

然后在您的 OnSuccess 函数中,将其更改为:

 function OnSuccess(response) {
        $("#tblCustomers").DataTable(
            {
                bLengthChange: true,lengthMenu: [[5,10,-1],[5,"All"]],bFilter: true,bSort: true,bPaginate: true,data: response,columns: [{ 'data': 'customerID' },{ 'data': 'contactName' },{ 'data': 'city' },{ 'data': 'country' }]
            });

列的第一个字母需要小写。

测试结果:

enter image description here

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。