User2012384 User2012384 - 5 months ago 36
jQuery Question

DataTables Cannot read property 'length' of undefined

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": "white.smith@logical.com",
"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:

enter image description here

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 );


enter image description here

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

Answer

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