DataTable无法读取未定义的属性“length” [英] DataTables Cannot read property 'length' of undefined

问题描述

以下是文档就绪功能

 脚本类型=text / javascriptcharset =utf-8> 
 $（document）.ready（function（）{
 $（'＃example'）。dataTable（{
bProcessing：true，
bServerSide 
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 ：$ login $
 {mData：Name}，
 {mData：CreatedDate} 
] 
}）; 
  

以下是服务器的响应（GetUser.ashx）

  [
 {
UserId：1，
LoginId：white.smith，
激活：Y，
名称：测试帐户，
姓氏：刘，
电子邮件：white.smith@logical。 com
CreatedDate：1/21/2014 12:03:00 PM，
EntityState：2，
EntityKey：System.Data。 EntityKey
}，
更多数据... 
] 
  

< >以下是数据应该放在的html表格

 < table cellpadding =0cellspacing =0border =0class =displayid =example> 
< thead> 
< tr> 
< th width =15％> User Detail< / th> 
< th width =15％> LoginID< / th> 
< th width =15％> Name< / th> 
< th width =15％>创建日期< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td colspan =5class =dataTables_empty>从服务器加载数据< / td> 
< / tr> 
< / tbody> 
< tfoot> 
< tr> 
< th width =15％> User Detail< / th> 
< th width =15％> LoginID< / th> 
< th width =15％> Name< / th> 
< th width =15％>创建日期< / th> 
< / tr> 
< / tfoot> 
< / table> 
  

预期结果：

但我遇到了一个问题： / p>

当页面加载时，浏览器中出现了一个未捕获的异常：

 无法读取未定义的属性'length'
  

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

  var aData = _fnGetObjectDataFn（oSettings.sAjaxDataProp）（json）; 
  

我检查了json是否有效，但aData为空，为什么会这样？

解决方案

因为有4列，所以在aoColumns中添加以下内容

 aoColumns：[
 {mData：null}，//用户详细资料
 {mData：LoginId}，
 {mData ：Name}，
 {mData：CreatedDate} 
] 
  

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

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

Refference网站了解更多关于aLengthMenu的内容是

http://datatables.net/ref#aLengthMenu

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)

[
    {
        "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

<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

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

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

解决方案

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

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

For undefined length I have tried the following code & 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" }
        ]
    });

Refference site to know more about "aLengthMenu" is

http://datatables.net/ref#aLengthMenu

这篇关于DataTable无法读取未定义的属性“length”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！