DataTables无法读取未定义的属性“长度”

下面是文档就绪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 'Detail'; } } ], "aoColumns": [ { "mData": "LoginId" }, { "mData": "Name" }, { "mData": "CreatedDate" } ] }); 

以下是来自服务器的响应（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... ] 

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

 
 
 
 
User Detail
 
LoginID
 
Name
 
Created Date
 
 
 
 
 
Loading data from server
 
 
 
 
 
User Detail
 
LoginID
 
Name
 
Created Date
 
 
  

预期结果：

但我遇到了一个问题：

在加载页面时，浏览器中有一个未被捕获的exception：

 Cannot read property 'length' of undefined 

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

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

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

Answer 1

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

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

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

 $('#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 'Detail'; } } ], "aoColumns": [ { "mData": null }, { "mData": "LoginId" }, { "mData": "Name" }, { "mData": "CreatedDate" } ] }); 

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

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

Answer 2

您的"sAjaxDataProp" : ""设置为空字符串，这会导致此错误。

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

正常的服务器json：

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

由于所有值都在aaData中，因此根本不需要sAjaxDataProp。

修改后的服务器端json：

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

现在值在myData中。 所以你需要通过设置告诉dataTables在哪里找到实际数据：

 "sAjaxDataProp" : "myData" 

这是一个Plunker

Answer 3

如果看到此错误，请查看从服务器返回的json，然后确保所有数据表’mData’值都具有匹配的条目。 如果您还使用豆子，也请检查它。

并且不需要为表格指定’tr’，’td’等。 如果你让jquery为你做这件事，那就更清洁了。 这是我的表格的样子：

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

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

Answer 4

使用$('#example').DataTable({.. （大写D）代替$('#example').dataTable({..

Answer 5

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