DataTable 错误 - 无法读取未定义的属性“长度”答案

【问题标题】：DataTable Error - Cannot read property 'length' of undefinedDataTable 错误 - 无法读取未定义的属性“长度”
【发布时间】：2015-05-08 12:08:56
【问题描述】：

我正在尝试使用对服务的 ajax 调用来构建我的 DataTable (1.10.5) - http://www.datatables.net/examples/ajax/

这是我的 Javascript：

$('#tableexample').DataTable({

    "dom": 'C<"clear">lfrtip',
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "../../api/EventTypes/GetAll",
    "aoColumnDefs": [
      {
          "aTargets": [0],
          "mData": "Id"
      },
       {
           "aTargets": [1], 
           "mData": "Name"
       },
       {
           "aTargets": [2],
           "mData": "Name"
       },
       {
           "aTargets": [3],
           "mData": "Name"
       },
       {
           "aTargets": [4],
           "mData": "Name"
       }
    ]
});

这是我的 HTML：

<table id="tableexample" class="table table-striped dataTable table-hover">
                        <thead>
                            <tr>
                                <th>Select</th>
                                <th>Event</th>
                                <th>Primary Category</th>
                                <th>Secondary Category</th>
                                <th>Workflow</th>
                            </tr>
                        </thead>
                    </table>

这是我的错误：

Uncaught TypeError: Cannot read property 'length' of undefined

如果我查看我的 jquery.dataTables.js - 它说我的数据未定义...

var data = _fnAjaxDataSrc( settings, json );

谁能帮助我正确设置我的 ajax 调用以动态构建我的表？

谢谢！

【问题讨论】：

您使用什么服务器端语言？ "sAjaxSource": "../../api/EventTypes/GetAll" 看起来不像 php 或 asp 文件。也许它只是没有返回任何东西，因为它无法联系服务器脚本。
这是一个从数据库中获取响应的 API 调用。我的回复如下所示： [ { "Id": 1, "Name": "Abandonment Proceeding Notes" }, { "Id": 2, "Name": "Adversary Closed" }, { "Id": 3, " Name": "Adversary Proceeding Dismissed" }, { "Id": 4, "Name": "Adversary Proceeding Filed" }]
您没有<tbody></tbody>。这可能是“未定义”。
基于datatables.net/examples/api/row_details.html 我不应该需要它。但我继续尝试......仍然没有运气:(同样的错误

标签： javascript jquery ajax datatable

【解决方案1】：

终于找到了！

我需要进行 ajax 调用并将数据传递给“aaData”：

$.ajax({
    url: '/Portal/api/EventTypes/GetEventWorkflowDefinitions',
    type: 'GET',
    dataType: 'json',
    success: function (data) {
        assignToEventsColumns(data);
    }
});

function assignToEventsColumns(data) {
var table = $('#tableexample').dataTable({
    "dom": 'C<"clear">lfrtip',
    "bAutoWidth": false,
    "aaData": data,
    "aaSorting": [],
    "aoColumnDefs": [
       {
           "aTargets": [0],
           "bSearchable": false,
           "bSortable": false,
           "bSort": false,
           "mData": "EventTypeId",
           "mRender": function (event) {
               return '<input class="childCheck" type="checkbox" id="childCheckBoxes" value="' + event + '">';
           }
       },
       {
           "aTargets": [1], 
           "mData": "EventType"
       }

一旦我这样做了……桌子就完美了！

【讨论】：