数据表 AJAX 请求 - 未知长度答案

【问题标题】：Datatables AJAX Request - Unknown Length数据表 AJAX 请求 - 未知长度
【发布时间】：2017-04-11 20:15:35
【问题描述】：

已经为此苦苦挣扎了一段时间。试图让我的数据表填充，但遇到以下错误：

Uncaught TypeError: Cannot read property 'length' of undefined
    at jquery.dataTables.min.js:48
    at i (jquery.dataTables.min.js:35)
    at Object.success (jquery.dataTables.min.js:35)
    at i (jquery-3.1.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.1.1.min.js:2)
    at A (jquery-3.1.1.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery-3.1.1.min.js:4)

据我所知，所有内容的格式都正确，所以一定有我遗漏的东西。有什么跳出来的吗？

这是我的 HTML 示例

<table id="myGrid" class="table">
                    <thead>
                        <tr>
                            <th>CarPrefix</th>
                            <th>CarNumber</th>
                            <th>CarDesc</th>
                            <th>CarScreenDesc</th>
                            <th>CarSummaryDesc</th>
                            <th>CarColorDesc</th>
                            <th>CarCodeComputed</th>
                            <th>CarStatusDesc</th>
                        </tr>
                    </thead>

这是我的 ajax 请求：

$('#myGrid').DataTable({
        ajax: '/populatecardata',
        dataSrc: 'data',
        columns: [
            { data:"CarPrefix" },
            { data: "CarNumber" },
            { data: "CarDesc" },
            { data: "CarScreenDesc" },
            { data: "CarSummaryDesc" },
            { data: "CarColorDesc" },
            { data: "CarCodeComputed" },
            { data: "CarStatusDesc" }
        ]
    });

我的控制器

Route("populatecardata"), HttpGet]

        public object getTableData()
        {

                using (CarEntities ce = new CarEntities())
                {

                PopulateData pd = new PopulateData();
                var resultsList = pd.GetTableData(ce);             
                return resultsList;

                }


        }

以及我提取数据的方法：

public object GetTableData(CarEntities ce)
        {
                Data ltr = new Data();
                resultsList = ce.CarData.Take(1).ToList();
                foreach(var result in resultsList)
            {
                TableResults tr = new TableResults();
                tr.CarPrefix = result.CarPrefix;
                tr.CarNumber = result.CarNumber;
                tr.CarDesc = result.CarDesc;
                tr.CarScreenDesc = result.CarScreenDesc;
                tr.CarSummaryDesc = result.CarSummaryDesc;
                tr.CarColorDesc = result.CarColorDesc;
                tr.CarCodeComputed = result.CarCodeComputed;
                tr.CarStatusDesc = result.CarStatusDesc;
                tr.CarStatusDesc = "TestStatus";
                ltr.jsondata.Add(tr);

            }
            var jsonObject = JsonConvert.SerializeObject(ltr);
            return jsonObject;

        }

        public class Data
        {
            [JsonProperty("data")]
            public List<TableResults> jsondata { get; set; }
            public Data()
            {
                jsondata = new List<TableResults>();
            }
        }




        public class TableResults
        {
            [JsonProperty("CarPrefix")]
            public string CarPrefix { get; set; }

            [JsonProperty("CarNumber")]
            public string CarNumber { get; set; }

            [JsonProperty("CarDesc")]
            public string CarDesc { get; set; }

            [JsonProperty("CarScreenDesc")]
            public string CarScreenDesc { get; set; }

            [JsonProperty("CarSummaryDesc")]
            public string CarSummaryDesc { get; set; }

            [JsonProperty("CarColorDesc")]
            public string CarColorDesc { get; set; }

            [JsonProperty("CarCodeComputed")]
            public string CarCodeComputed { get; set; }

            [JsonProperty("CarStatusDesc")]
            public string CarStatusDesc { get; set; }


        }
    }

和一个示例 JSON 对象：

{
    "data": [
        {
            "CarPrefix": "ty",
            "CarNumber": "1009",
            "CarDesc": "Toyota 2009 4Cylinder FWD",
            "CarScreenDesc": "4CY-Toyota",
            "CarSummaryDesc": "Toyota 2009",
            "CarColorDesc": "Red",
            "CarCodeComputed": "ty1009",
            "CarStatusDesc": "Available"
        }
    ]
}

【问题讨论】：

感谢@Bindrid 的帮助。我想通了。尴尬地说我实际上是在序列化我的 JSON 两次，JSON 格式化程序足够聪明，可以弄清楚，但我的大脑却没有。

标签： c# jquery ajax datatables

【解决方案1】：

如果您知道如何在 Chrome 或 IE 调试器中使用 debugger 命令，您可以这样做以更好地了解问题所在：

$('#myGrid').DataTable({
    ajax:{
        url: '/populatecardata',
        dataFilter: function(dtData) {
            debugger;
            console.log(dtData);
            return dtData;
        },
        error: function(err, status){
            debugger;
            console.log(err);
         }

     },
columns: [
    { data:"CarPrefix" },
    { data: "CarNumber" },
    { data: "CarDesc" },
    { data: "CarScreenDesc" },
    { data: "CarSummaryDesc" },
    { data: "CarColorDesc" },
    { data: "CarCodeComputed" },
    { data: "CarStatusDesc" }
]
});

【讨论】：

【解决方案2】：

你的 DataTable 语法有点不对。

$('#myGrid').DataTable({
    ajax:{url: '/populatecardata',
          dataSrc: 'data'},
    columns: [
        { data:"CarPrefix" },
        { data: "CarNumber" },
        { data: "CarDesc" },
        { data: "CarScreenDesc" },
        { data: "CarSummaryDesc" },
        { data: "CarColorDesc" },
        { data: "CarCodeComputed" },
        { data: "CarStatusDesc" }
    ]
});

然而，dataSrc 默认是“data”，所以你实际上可以删除它并继续使用

$('#myGrid').DataTable({
    ajax: '/populatecardata',

    columns: [
        { data:"CarPrefix" },
        { data: "CarNumber" },
        { data: "CarDesc" },
        { data: "CarScreenDesc" },
        { data: "CarSummaryDesc" },
        { data: "CarColorDesc" },
        { data: "CarCodeComputed" },
        { data: "CarStatusDesc" }
    ]
});

【讨论】：