DataTables不能读取未定义属性“length”

Below is the document ready function

下面是文档准备函数

Script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('#example').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "GetUser.ashx",
            "sServerMethod": "POST",
            "sAjaxDataProp" : "",
            "aoColumnDefs": [ {
            "aTargets": [ 0 ],
            "mData": "download_link",
            "mRender": function ( data, type, full ) {
               return '<a href="/UserDetail.aspx?ID='+data+'">Detail</a>';
             }
           } ],
            "aoColumns": [
                { "mData": "LoginId" },
                { "mData": "Name" },
                { "mData": "CreatedDate" }
            ]
        });

Below is the respond from server (GetUser.ashx)

下面是服务器的响应(GetUser.ashx)

[
    {
        "UserId": "1",
        "LoginId": "white.smith",
        "Activated": "Y",
        "Name": "Test Account",
        "LastName": "Liu",
        "Email": "[e-mail]",
        "CreatedDate": "1/21/2014 12:03:00 PM",
        "EntityState": "2",
        "EntityKey": "System.Data.EntityKey"
    },
More Data...
]

Below is the html table where the data should be put

下面是应该放置数据的html表

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
             <th width="15%">User Detail</th>
            <th width="15%">LoginID</th>
            <th width="15%">Name</th>
            <th width="15%">Created Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="5" class="dataTables_empty">Loading data from server</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
             <th width="15%">User Detail</th>
            <th width="15%">LoginID</th>
            <th width="15%">Name</th>
            <th width="15%">Created Date</th>
        </tr>
    </tfoot>
</table>

Expected result:

预期结果:

But I came across a problem:

但我遇到了一个问题:

While the page is loading, there was an uncaught exception from the browser:

当页面加载时，浏览器有一个未被捕获的异常:

Cannot read property 'length' of undefined 

When I further check, it came from line 2037 of jquery.dataTables.js

当我进一步检查时，它来自jquery. datatabls .js的第2037行

var aData = _fnGetObjectDataFn( oSettings.sAjaxDataProp )( json );

I checked that the json was valid, but the "aData" was null, why this happen?

我检查了json是有效的，但是“aData”是空的，为什么会发生这种情况?

5 个解决方案

#1

As there are 4 columns, add the following in "aoColumns":

由于有4列，在“aoColumns”中添加以下内容:

"aoColumns": [
  { "mData": null },  // for User Detail
  { "mData": "LoginId" },
  { "mData": "Name" },
  { "mData": "CreatedDate" }
]

For undefined length, I have tried the following code and it's working:

对于未定义的长度，我尝试了以下代码，它正在工作:

$('#example').dataTable({
 "aLengthMenu": [[100, 200, 300], [100, 200, 300]],
  "iDisplayLength": 100,
  "iDisplayStart" : 0,
  "bProcessing": true,
  "bServerSide": true,
  "sAjaxSource": "GetUser.ashx",
  "sServerMethod": "POST",
  "sAjaxDataProp" : "",
  "aoColumnDefs": [ {
    "aTargets": [ 0 ],
    "mData": "download_link",
    "mRender": function ( data, type, full ) {
      return '<a href="/UserDetail.aspx?ID='+data+'">Detail</a>';
    }
  } ],
  "aoColumns": [
    { "mData": null },
    { "mData": "LoginId" },
    { "mData": "Name" },
    { "mData": "CreatedDate" }
  ]
});

The reference site to know more about aLengthMenu is:

了解更多关于aLengthMenu的参考网站是:

https://legacy.datatables.net/ref#aLengthMenu

https://legacy.datatables.net/ref aLengthMenu

#2

Your "sAjaxDataProp" : "" is set to an empty string, which causes this error.

您的“sAjaxDataProp”:“”设置为空字符串，这将导致此错误。

dataTables expects to have a string here to tell under which key your server returned data can be found. This defaults to aaData, so your json should include this key amongst all others that might be returned or needed by pagination etc.

dataTables希望在这里有一个字符串，它可以告诉您的服务器在哪个键下可以找到返回的数据。这个默认值是aaData，所以您的json应该包含这一键，在所有其他可能返回或需要的分页等中。

Normal serversided json:

json:正常服务端

{
"iTotalRecords":"6",
"iTotalDisplayRecords":"6",
"aaData": [
    [
        "1",
        "sameek",
        "sam",
        "sam",
        "[e-mail]",
        "1",
        ""
    ],...

Since all values are in aaData you don't need sAjaxDataProp at all.

因为所有的值都在aaData中，所以根本不需要sAjaxDataProp。

Modified serverside json:

修改服务端json:

{
"iTotalRecords":"6",
"iTotalDisplayRecords":"6",
"myData": [
    [
        "1",
        "sameek",
        "sam",
        "sam",
        "[e-mail]",
        "1",
        ""
    ],

Now the values are in myData. so you need to tell dataTables where to find the actual data by setting:

现在值在myData中。因此，您需要通过设置告诉dataTables何处查找实际数据:

"sAjaxDataProp" : "myData"

Here is a Plunker

这是一个一美元

#3

If you see this error, look at the json returned from the server, and then make sure that all of your datatable 'mData' values have matching entry. If you are also using a bean, check there as well.

如果您看到这个错误，请查看从服务器返回的json，然后确保所有的datatable的“mData”值都有匹配的条目。如果您也在使用bean，也可以在那里进行检查。

And there is no need specify 'tr', 'td', etc for the table. It is much cleaner if you let jquery do that for you. Here is what my tables look like:

并且不需要为表指定“tr”、“td”等。如果让jquery为您做这些，它会更简洁。下面是我的表格:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="myTable" style="table-layout:fixed" ></table>

and then my datatable elements specify the width and column title:

然后我的datatable元素指定宽度和列标题:

{sTitle: "Column A", sWidth: "100px", mData: "idStringFromJson", bSortable: false},

#4

Use $('#example').DataTable({.. (capital D) instead of $('#example').dataTable({..

使用$(' # ').DataTable({ . .(大写D)而不是$('#example').dataTable({..

#5

When I ran into this problem, it was actually the result of an un-applied migration. I had restored a backup of the database, which hadn't yet had one of my recent schema migrations run on it, and once I ran migrations, everything worked fine.

当我遇到这个问题时，它实际上是未应用的迁移的结果。我已经恢复了数据库的备份，它还没有运行我最近的模式迁移，并且一旦我运行了迁移，一切都很正常。