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

JavaScript-DataTable错误-无法读取未定义的属性’length’

我正在尝试使用对服务的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调用来动态构建表?

谢谢!

解决方法:

终于找到了!

我需要进行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"
       }

一旦我做完了……桌子就可以完美地建起来了!

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

相关推荐