web-dev-qa-db-fra.com

DataTables Impossible de lire la propriété 'longueur' de non définie

Ci-dessous la fonction de préparation de document

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

Ci-dessous, la réponse du serveur (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...
]

Ci-dessous la table HTML où les données doivent être mises

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

Résultat attendu:

enter image description here

Mais je suis tombé sur un problème:

Pendant le chargement de la page, il y avait une exception non interceptée du navigateur:

Cannot read property 'length' of undefined

Quand je vérifie plus en détail, cela venait de la ligne 2037 de jquery.dataTables.js

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

enter image description here

J'ai vérifié que le json était valide, mais le "aData" était nul, pourquoi cela se produit-il?

javascriptjqueryasp.netdatatablesjquery-datatables
9
User2012384

Comme il y a 4 colonnes, ajoutez ceci dans "aoColumns":

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

Pour une longueur indéfinie, j'ai essayé le code suivant et cela fonctionne:

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

Le site de référence pour en savoir plus sur aLengthMenu est:

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

6
Smruti

Votre "sAjaxDataProp" : "" est défini sur une chaîne vide, ce qui provoque cette erreur.

dataTables s'attend à ce qu'une chaîne indique ici sous quelle clé vos données renvoyées par le serveur peuvent être trouvées .Par défaut, aaData, votre json doit donc inclure cette clé parmi toutes les autres qui pourraient être retournées ou nécessaires à la pagination, etc.

Json côté serveur normal:

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

Puisque toutes les valeurs sont dans aaData, vous n'avez pas du tout besoin de sAjaxDataProp.

Serveur modifié json:

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

Maintenant, les valeurs sont dans myData. vous devez donc indiquer à dataTables où trouver les données réelles en définissant:

"sAjaxDataProp" : "myData"

Voici un Plunker

9
mainguy

Si vous voyez cette erreur, examinez le JSON renvoyé par le serveur, puis assurez-vous que toutes vos valeurs datables "mData" ont une entrée correspondante. Si vous utilisez également un haricot, vérifiez-le également.

Et il n'est pas nécessaire de spécifier 'tr', 'td', etc. pour la table. C'est beaucoup plus propre si vous laissez jQuery le faire pour vous. Voici à quoi mes tables ressemblent:

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

puis mes éléments datatable spécifient la largeur et le titre de la colonne:

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

Utilisez $('#example').DataTable({.. (D majuscule) au lieu de $('#example').dataTable({..

0
Tayba

Lorsque j'ai rencontré ce problème, il résultait en fait d'une migration non appliquée. J'avais restauré une sauvegarde de la base de données sur laquelle aucune de mes dernières migrations de schéma n'avait été exécutée, et une fois les migrations effectuées, tout fonctionnait correctement.

0
Daniel Hawkins