Question

一段时间以来一直在努力解决这个问题。试图让我的数据表填充，但遇到以下错误：

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"
        }
    ]
}

Answer 1

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

Answer 2

如果你知道如何在Chrome或IE调试器中使用调试器命令，你可以这样做，以便更好地了解出现的问题：

$('#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" }
]
});

数据表AJAX请求 - 未知长度

2 个答案: