Tables de données: impossible de lire la propriété 'mData' de non défini

J'ai un problème avec Datatables. J'ai également parcouru ce lien qui n'a donné aucun résultat. J'ai inclus toutes les conditions préalables où j'analyse les données directement dans le DOM. Veuillez m'aider à résoudre ce problème.

Scénario

$(document).ready(function() {
  $('.viewCentricPage .teamCentric').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bPaginate": false,
    "bFilter": true,
    "bSort": true,
    "aaSorting": [
      [1, "asc"]
    ],
    "aoColumnDefs": [{
      "bSortable": false,
      "aTargets": [0]
    }, {
      "bSortable": true,
      "aTargets": [1]
    }, {
      "bSortable": false,
      "aTargets": [2]
    }],
  });
});

FYI dataTables nécessite une table bien formée. Il doit contenir des balises <thead>et <tbody>, sinon il renvoie cette erreur. Vérifiez également que toutes vos lignes, y compris la ligne d'en-tête, ont le même nombre de colonnes.

Ce qui suit générera une erreur (no <thead>et <tbody>tags)

<table id="sample-table">
    <tr>
        <th>title-1</th>
        <th>title-2</th>
    </tr>
    <tr>
        <td>data-1</td>
        <td>data-2</td>
    </tr>
</table>

Ce qui suit générera également une erreur (nombre inégal de colonnes)

<table id="sample-table">
    <thead>
        <tr>
            <th>title-1</th>
            <th>title-2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data-1</td>
            <td>data-2</td>
            <td>data-3</td>
        </tr>
    </tbody>
</table>

Pour plus d'informations, lisez plus ici

Une cause fréquente Cannot read property 'fnSetData' of undefinedest le nombre de colonnes incompatibles, comme dans ce code erroné:

<thead>                 <!-- thead required -->
    <tr>                <!-- tr required -->
        <th>Rep</th>    <!-- td instead of th will also work -->
        <th>Titel</th>
                        <!-- th missing here -->
    </tr>
</thead>
<tbody>
    <tr>
        <td>Rep</td>
        <td>Titel</td>
        <td>Missing corresponding th</td>
    </tr>
</tbody>

Alors que le code suivant avec un <th>par<td> (le nombre de colonnes doit correspondre) fonctionne:

<thead>
    <tr>
        <th>Rep</th>       <!-- 1st column -->
        <th>Titel</th>     <!-- 2nd column -->
        <th>Added th</th>  <!-- 3rd column; th added here -->
    </tr>
</thead>
<tbody>
    <tr>
        <td>Rep</td>             <!-- 1st column -->
        <td>Titel</td>           <!-- 2nd column -->
        <td>th now present</td>  <!-- 3rd column -->
    </tr>
</tbody>

L'erreur apparaît également lors de l'utilisation d'une tête bien formée avec un colspan mais sans deuxième rangée.

Pour une table avec 7 colonnes, ce qui suit ne fonctionne pas et nous voyons "Impossible de lire la propriété 'mData' de non défini" dans la console javascript:

<thead>
    <tr>
        <th>Rep</th>
        <th>Titel</th>
        <th colspan="5">Download</th>
    </tr>
</thead>

Pendant que cela fonctionne:

<thead>
    <tr>
        <th rowspan="2">Rep</th>
        <th rowspan="2">Titel</th>
        <th colspan="5">Download</th>
    </tr>
    <tr>
        <th>pdf</th>
        <th>nwc</th>
        <th>nwctxt</th>
        <th>mid</th>
        <th>xml</th>
    </tr>
</thead>

J'ai eu ce même problème en utilisant les données DOM dans une vue Rails créée via le générateur d'échafaudage. Par défaut, la vue omet les <th>éléments des trois dernières colonnes (qui contiennent des liens pour afficher, masquer et détruire des enregistrements). J'ai trouvé que si j'ajoutais des titres pour ces colonnes dans un <th>élément dans le <thead>, cela corrigeait le problème.

Je ne peux pas dire si c'est le même problème que vous rencontrez car je ne peux pas voir votre html. Si ce n'est pas le même problème, vous pouvez utiliser le débogueur Chrome pour déterminer sur quelle colonne il génère une erreur en cliquant sur l'erreur dans la console (qui vous amènera au code sur lequel il échoue), puis en ajoutant un conditionnel point d'arrêt (at col==undefined). Lorsqu'elle s'arrête, vous pouvez vérifier la variable ipour voir sur quelle colonne elle se trouve actuellement et qui peut vous aider à comprendre ce qui diffère de cette colonne des autres. J'espère que cela pourra aider!

Ayant <thead>et <tbody>avec le même nombre de <th>et <td>résolu mon problème.

Cela peut également se produire si vous avez des arguments de table pour des choses comme celles 'aoColumns':[..]qui ne correspondent pas au nombre correct de colonnes. Des problèmes comme celui-ci peuvent généralement se produire lors de la copie de code collé à partir d'autres pages pour démarrer rapidement l'intégration de vos tables de données.

Exemple:

Cela ne fonctionnera pas:

<table id="dtable">
    <thead>
        <tr>
            <th>col 1</th>
            <th>col 2</th>
        </tr>
    </thead>
    <tbody>
        <td>data 1</td>
        <td>data 2</td>
    </tbody>
</table>
<script>
        var dTable = $('#dtable');
        dTable.DataTable({
            'order': [[ 1, 'desc' ]],
            'aoColumns': [
                null,
                null,
                null,
                null,
                null,
                null,
                {
                    'bSortable': false
                }
            ]
        });
</script>

Mais cela fonctionnera:

<table id="dtable">
    <thead>
        <tr>
            <th>col 1</th>
            <th>col 2</th>
        </tr>
    </thead>
    <tbody>
        <td>data 1</td>
        <td>data 2</td>
    </tbody>
</table>
<script>
        var dTable = $('#dtable');
        dTable.DataTable({
            'order': [[ 0, 'desc' ]],
            'aoColumns': [
                null,
                {
                    'bSortable': false
                }
            ]
        });
</script>

Une autre raison pour laquelle cela se produit est à cause du paramètre colonnes dans l'initialisation DataTable.

Le nombre de colonnes doit correspondre aux en-têtes

"columns" : [ {
                "width" : "30%"
            }, {
                "width" : "15%"
            }, {
                "width" : "15%"
            }, {
                "width" : "30%"
            } ]

J'avais 7 colonnes

<th>Full Name</th>
<th>Phone Number</th>
<th>Vehicle</th>
<th>Home Location</th>
<th>Tags</th>
<th>Current Location</th>
<th>Serving Route</th>

Vous devez supprimer votre colspanet le nombre de th et tddoit correspondre.

Astuces 1:

Reportez-vous à ce lien, vous obtenez quelques idées:

https://datatables.net/forums/discussion/20273/uncaught-typeerror-cannot-read-property-mdata-of-undefined

Conseils 2:

Vérifiez que ce qui suit est correct:

• Veuillez consulter le Jquery Vesion
• Veuillez vérifier la version de votre CDN ou vos fichiers .min & css locaux liés aux données.
• ont votre table <thead></thead>et <tbody></tbody>balises
• Votre table En - tête Colonnes Longueur identique à Corps Colonnes Longueur
• Votre utilisation de quelques cloumns dans style='display:none'la même propriété s'applique en vous à la fois à l'en-tête et au corps.
• vos colonnes de table ne sont pas vides, utilisez quelque chose comme [Null, -, NA, Nil]
• Votre table est bien sans <td>, <tr>problème

dans mon cas, cette erreur s'est produite si j'utilise une table sans en-tête

              <thead>
                   <tr>
                       <th>example</th>
                  </tr>
              </thead>

J'ai fait face à la même erreur, quand j'ai essayé d'ajouter colspan au dernier

<table>
  <thead>
    <tr>    
      <th>&nbsp;</th> <!-- column 1 -->
      <th colspan="2">&nbsp;</th> <!-- column 2&3 -->
    </tr>
  </thead>

  <tbody>
    <tr>
      <tr>&nbsp;</tr>
      <tr>&nbsp;</tr>
      <tr>&nbsp;</tr>
    </tr>
  </tbody>
</table>

et l'a résolu en ajoutant une colonne cachée à la fin de tr

<thead>
  <tr>    
    <th>&nbsp;</th> <!-- column 1 -->
    <th colspan="2">&nbsp;</th> <!-- column 2&3 -->

    <!-- hidden column 4 for proper DataTable applying -->
    <th style="display: none"></th> 
  </tr>
</thead>

<tbody>
  <tr>
    <tr>&nbsp;</tr>
    <tr>&nbsp;</tr>
    <tr>&nbsp;</tr>

    <!-- hidden column 4 for proper DataTable applying -->
    <tr style="display: none"></tr>
  </tr>
</tbody>

Une explication à cela est que, pour une raison quelconque, DataTable ne peut pas être appliqué à une table avec colspan dans le dernier th, mais peut être appliqué, si colspan est utilisé dans n'importe quel milieu.

Cette solution est un peu hacky, mais plus simple et plus courte que toute autre solution que j'ai trouvée.

J'espère que cela aidera quelqu'un.

Problème légèrement différent pour moi des réponses données ci-dessus. Pour moi, le balisage HTML était bien, mais une de mes colonnes dans le javascript était manquante et ne correspondait pas au html.

c'est à dire

<table id="companies-index-table" class="table table-responsive-sm table-striped">

                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Created at</th>
                                <th>Updated at</th>
                                <th>Count</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($companies as $company)
                                <tr>
                                    <td>{{ $company->id }}</td>
                                    <td>{{ $company->name }}</td>
                                    <td>{{ $company->created_at }}</td>
                                    <td>{{ $company->updated_at }}</td>
                                    <td>{{ $company->count }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

Mon script: -

<script>
        $(document).ready(function() {
            $('#companies-index-table').DataTable({
                serverSide: true,
                processing: true,
                responsive: true,
                    ajax: "{{ route('admincompanies.datatables') }}",
                columns: [
                    { name: 'id' },
                    { name: 'name' },
                    { name: 'created_at' },
                    { name: 'updated_at' },     <-- I was missing this line so my columns didn't match the thead section.
                    { name: 'count', orderable: false },
                ],
            });
        });
    </script>

J'avais une table générée dynamiquement, mais mal formée avec une faute de frappe. J'ai copié une <td>balise dans une autre <td>par erreur. Mon nombre de colonnes correspondait. J'avais <thead>et des <tbody>balises. Tout concordait, sauf cette petite erreur que je n'ai pas remarquée depuis un moment, car ma colonne contenait beaucoup de balises de liens et d'images.

J'avais rencontré le même problème mais je générais la table dynamiquement . Dans mon cas, ma table avait des balises <thead>et manquantes <tbody>.

voici mon extrait de code s'il a aidé quelqu'un

   //table string
   var strDiv = '<table id="tbl" class="striped center responsive-table">';

   //add headers
   var strTable = ' <thead><tr id="tableHeader"><th>Customer Name</th><th>Customer Designation</th><th>Customer Email</th><th>Customer Organization</th><th>Customer Department</th><th>Customer ContactNo</th><th>Customer Mobile</th><th>Cluster Name</th><th>Product Name</th><th> Installed Version</th><th>Requirements</th><th>Challenges</th><th>Future Expansion</th><th>Comments</th></tr> </thead> <tbody>';


  //add data
  $.each(data, function (key, GetCustomerFeedbackBE) {
                            strTable = strTable + '<tr><td>' + GetCustomerFeedbackBE.StrCustName + '</td><td>' + GetCustomerFeedbackBE.StrCustDesignation + '</td><td>' + GetCustomerFeedbackBE.StrCustEmail + '</td><td>' + GetCustomerFeedbackBE.StrCustOrganization + '</td><td>' + GetCustomerFeedbackBE.StrCustDepartment + '</td><td>' + GetCustomerFeedbackBE.StrCustContactNo + '</td><td>' + GetCustomerFeedbackBE.StrCustMobile + '</td><td>' + GetCustomerFeedbackBE.StrClusterName + '</td><td>' + GetCustomerFeedbackBE.StrProductName + '</td><td>' + GetCustomerFeedbackBE.StrInstalledVersion + '</td><td>' + GetCustomerFeedbackBE.StrRequirements + '</td><td>' + GetCustomerFeedbackBE.StrChallenges + '</td><td>' + GetCustomerFeedbackBE.StrFutureExpansion + '</td><td>' + GetCustomerFeedbackBE.StrComments + '</td></tr>';
                        });

//add end of tbody
 strTable = strTable + '</tbody></table>';

//insert table into a div                 
   $('#divCFB_D').html(strDiv);
   $('#tbl').html(strTable);


    //finally add export buttons 
   $('#tbl').DataTable({
                            dom: 'Bfrtip',
                            buttons: [
                                'copy', 'csv', 'excel', 'pdf', 'print'
                            ]
                        });

En plus de l'incohérence et des nombres, un élément manquant dans la partie des colonnes de scripts datables peut également en être la cause. Correction de la correction de ma barre de recherche de tables de données.

Je parle de cette partie;

"columns": [
  null,
  .
  .
  .
  null
           ],

J'ai eu du mal avec cette erreur jusqu'à ce qu'on m'indique que cette partie avait un «zéro» de moins que mon nombre total de têtes.

Celui-ci m'a rendu fou - comment rendre un DataTable avec succès dans une vue .NET MVC. Cela a fonctionné:

 **@model List<Student>
 @{
    ViewData["Title"] = "Index";
}
 <h2>NEW VIEW Index</h2>
 <table id="example" class="display" style="width:100%">
   <thead>
   <tr>
   <th>ID</th>
    <th>Firstname</th>
    <th>Lastname</th> 
  </tr>
  </thead>
  <tbody>
@foreach (var element in Model)
{
    <tr>
    <td>@Html.DisplayFor(m => element.ID)</td>
    <td>@Html.DisplayFor(m => element.FirstName)</td>
    <td>@Html.DisplayFor(m => element.LastName)</td>
    </tr>

}
</tbody>
</table>**

Script dans le fichier JS:

**$(document).ready(function () {
    $('#example').DataTable();
});**

Dans mon cas, et en utilisant ASP.NET GridView, UpdatePanel et avec DropDownList (avec le plugin Chosen où je réinitialise la valeur à zéro en utilisant une ligne Javascript), j'ai eu cette erreur et j'ai tout essayé sans espoir pendant des jours. Le problème était que le code de ma liste déroulante dans le code était le suivant et lorsque je sélectionne une valeur deux fois pour appliquer son action aux lignes de grille sélectionnées, j'obtiens cette erreur. J'ai pensé pendant des jours que c'était un problème Javascript (encore une fois, dans mon cas) et finalement le correctif donnait zéro pour la valeur drowpdown avec le processus de mise à jour:

  private void ddlTasks_SelectedIndexChanged(object sender, System.EventArgs e)
  {
     if (ddlTasks.SelectedValue != 0) {
        ChangeStatus(ddlTasks.SelectedValue);
        ddlTasks.SelectedValue = "0"; //// **This fixed my issue**
     }

     dvItemsGrid.DataSource = CreateDatasource();
     dvItemsGrid.DataBind();
     dvItemsGrid.UseAccessibleHeader = true;
     dvItemsGrid.HeaderRow.TableSection = TableRowSection.TableHeader;

  }

C'était ma faute:

     $('#<%= DropDownList.ClientID%>').val('0').trigger("chosen:updated").chosen();

Vous devez encapsuler vos lignes <thead>pour les en-têtes de colonne et <tbody>pour les lignes. Assurez-vous également que vous avez le numéro correspondant. des en-têtes de colonne <th>comme vous le faites pour latd

Je peux provenir du champ aoColumns. Comme indiqué ICI

aoColumns: si spécifié, la longueur de ce tableau doit être égale au nombre de colonnes dans la table HTML d'origine. Utilisez «null» lorsque vous souhaitez utiliser uniquement les valeurs par défaut et les options détectées automatiquement.

Ensuite, vous devez ajouter des champs comme dans les colonnes du tableau

...
aoColumnDefs: [
    null,
    null,
    null,
    { "bSortable": false },
    null,
],
...

dans mon cas, la cause de cette erreur est que j'ai 2 tables qui ont le même nom d'ID avec une structure de table différente, en raison de mon habitude de copier-coller le code de la table. assurez-vous d'avoir un identifiant différent pour chaque table.

<table id="tabel_data">
    <thead>
        <tr>
            <th>heading 1</th>
            <th>heading 2</th>
            <th>heading 3</th>
            <th>heading 4</th>
            <th>heading 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data-1</td>
            <td>data-2</td>
            <td>data-3</td>
            <td>data-4</td>
            <td>data-5</td>
        </tr>
    </tbody>
</table>

<table id="tabel_data">
    <thead>
        <tr>
            <th>heading 1</th>
            <th>heading 2</th>
            <th>heading 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data-1</td>
            <td>data-2</td>
            <td>data-3</td>
        </tr>
    </tbody>
</table>

J'ai trouvé une "solution".

Ce code ne fonctionne pas:

<table>
<thead>
    <tr>
        <th colspan="3">Test</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody>

Mais c'est ok:

<table>
<thead>
    <tr>
        <th colspan="2">Test</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody>

Je pense que le problème est que le dernier TH ne peut pas avoir d'attribut colspan.