wake-up-neo.com

DataTables Eigenschaft 'length' von undefined kann nicht gelesen werden

Unten ist die Dokumentbereitschaftsfunktion

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" }
            ]
        });

Unten ist die Antwort vom Server (GetUser.ashx)

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

Unten ist die HTML-Tabelle, in die die Daten eingefügt werden sollen

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

Erwartetes Ergebnis:

enter image description here

Aber ich bin auf ein Problem gestoßen:

Während die Seite geladen wird, gab es eine nicht erfasste Ausnahme vom Browser:

Cannot read property 'length' of undefined 

Als ich weiter nachsehe, kam es aus Zeile 2037 von jquery.dataTables.js

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

enter image description here

Ich habe überprüft, ob der Json gültig ist, aber die "aData" war null. Warum passiert das?

9
User2012384

Da es 4 Spalten gibt, fügen Sie Folgendes in "aoColumns" hinzu:

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

Für undefinierte Länge habe ich den folgenden Code ausprobiert und funktioniert:

$('#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" }
  ]
});

Die Referenzseite, die mehr über aLengthMenu erfahren soll, ist:

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

6
Smruti

Ihr "sAjaxDataProp" : "" ist auf eine leere Zeichenfolge gesetzt, die diesen Fehler verursacht.

dataTables erwartet hier eine Zeichenfolge, unter der angegeben wird, unter welchem ​​Schlüssel die vom Server zurückgegebenen Daten gefunden werden können .. __Dieser Standardwert ist aaData. Daher sollte Ihr json diesen Schlüssel unter allen anderen Schlüsseln angeben, die möglicherweise zurückgegeben werden oder durch Seitenumbruch usw.

Normaler serverseitiger Json:

{
"iTotalRecords":"6",
"iTotalDisplayRecords":"6",
"aaData": [
    [
        "1",
        "sameek",
        "sam",
        "sam",
        "[email protected]",
        "1",
        ""
    ],...

Da alle Werte in aaData sind, benötigen Sie überhaupt nicht sAjaxDataProp.

Modifizierter serverseitiger Json:

{
"iTotalRecords":"6",
"iTotalDisplayRecords":"6",
"myData": [
    [
        "1",
        "sameek",
        "sam",
        "sam",
        "[email protected]",
        "1",
        ""
    ],

Jetzt sind die Werte in myData. Daher müssen Sie dataTables angeben, wo Sie die tatsächlichen Daten finden, indem Sie Folgendes einstellen:

"sAjaxDataProp" : "myData"

Hier ist ein Plunker

9
mainguy

Wenn Sie diesen Fehler sehen, sehen Sie sich den vom Server zurückgegebenen Json an und stellen Sie sicher, dass alle Ihre datable-Werte für "mData" übereinstimmende Einträge haben. Wenn Sie auch eine Bohne verwenden, prüfen Sie auch dort.

Es ist nicht notwendig, für die Tabelle 'tr', 'td' usw. anzugeben. Es ist viel sauberer, wenn Sie jquery das für Sie tun lassen. So sehen meine Tische aus:

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

und dann geben meine datierbaren Elemente die Breite und den Spaltentitel an:

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

Verwenden Sie $('#example').DataTable({.. (Kapital D) anstelle von $('#example').dataTable({..

0
Tayba

Als ich auf dieses Problem stieß, war es eigentlich das Ergebnis einer nicht angewendeten Migration. Ich hatte eine Sicherungskopie der Datenbank wiederhergestellt, auf der noch nicht eine meiner letzten Schema-Migrationen ausgeführt wurde. Nachdem ich die Migrationen ausgeführt hatte, funktionierte alles gut.

0
Daniel Hawkins