Datatables: Impossible de lire la propriété 'mData' de non définie
J'ai un problème avec Datatables. Je suis aussi passé par ce lien qui ne m’a donné aucun résultat. J’ai inclus tous les prérequis pour l’analyse directe des données dans le DOM. Aidez-moi à résoudre ce problème.
Script
$(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 les balises <thead> et <tbody>, sinon cette erreur est générée. Vérifiez également que toutes vos lignes, y compris la ligne d’en-tête, ont le même nombre de colonnes.
Les éléments suivants vont générer une erreur (pas de balises <thead> et <tbody>)
<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>
Les éléments suivants généreront également une erreur (nombre de colonnes inégal)
<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'infos lisez plus ici
Une cause fréquente de Cannot read property 'fnSetData' of undefined est le nombre incohérent de colonnes, 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 thead bien formée avec un colspan mais sans seconde rangée.
Pour une table à 7 colonnes, ce qui suit ne fonctionne pas et on voit "Impossible de lire la propriété 'mData' of undefined" dans la console javascript:
<thead>
<tr>
<th>Rep</th>
<th>Titel</th>
<th colspan="5">Download</th>
</tr>
</thead>
Alors 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 le 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 éléments <th> des trois dernières colonnes (qui contiennent des liens pour afficher, masquer et détruire les enregistrements). J'ai constaté que si j'ajoutais des titres pour ces colonnes dans un élément <th> du <thead>, le problème était résolu.
Je ne peux pas dire si c'est le même problème que vous rencontrez depuis que je ne peux pas voir votre code HTML. Si ce n'est pas le même problème, vous pouvez utiliser le débogueur de chrome pour déterminer la colonne sur laquelle l'erreur a lieu en cliquant sur l'erreur dans la console (qui vous mènera au code sur lequel elle échoue), puis en ajoutant un code conditionnel. point d'arrêt (à col==undefined). Quand il s’arrête, vous pouvez vérifier la variable i pour voir dans quelle colonne elle se trouve actuellement, ce qui peut vous aider à comprendre ce qui est différent de cette colonne par rapport à celle-ci. J'espère que cela pourra aider!
Cela peut également se produire si vous avez des arguments de table pour des éléments tels que 'aoColumns':[..] qui ne correspondent pas au nombre correct de colonnes. Des problèmes de ce type peuvent généralement survenir lors de la copie d'un code collé à partir d'autres pages pour lancer 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>
Cela est dû au paramètre Colonnes lors de l'initialisation de 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 colspan et le nombre de th et td doit correspondre.
dans mon cas, cette erreur est survenue si j'utilise un tableau sans en-tête
<thead>
<tr>
<th>example</th>
</tr>
</thead>
Problème légèrement différent pour moi des réponses données ci-dessus. Pour moi, le balisage HTML était correct, mais une de mes colonnes dans le javascript était manquante et ne correspondait pas au code 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>
Dans mon cas, et en utilisant ASP.NET GridView, UpdatePanel et DropDownList (avec le plug-in Chosen où je réinitialise la valeur à l'aide d'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 était la suivante et lorsque je sélectionne une valeur deux fois pour appliquer son action aux lignes de la grille sélectionnées, le message d'erreur s'affiche. Je pensais depuis des jours que c'était un problème avec 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 de ma faute:
$('#<%= DropDownList.ClientID%>').val('0').trigger("chosen:updated").chosen();
J'avais rencontré le même problème mais je générais table Dynamiquement . Dans mon cas, ma table avait les balises <thead> et <tbody> manquantes.
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'
]
});
J'ai eu une table générée dynamiquement, mais mal formée avec une faute de frappe. J'ai copié une balise <td> dans un autre <td> par erreur. Le nombre de mes colonnes correspondait. J'avais <thead> et <tbody> tags. Tout concordait, à l'exception de cette petite erreur que je n'avais pas remarquée pendant un moment, car ma colonne contenait de nombreuses balises link et image.
En plus des chiffres incohérents et incohérents, un élément manquant dans la partie des colonnes de scripts de datatable peut également en être la cause. Corriger la barre de recherche de mes tables de données a été corrigé.
Je parle de cette partie;
"columns": [
null,
.
.
.
null
],
J'ai lutté avec cette erreur jusqu'à ce que je sois averti que cette partie avait un moins "nul" que le nombre total de mes têtes.
Avoir <thead> et <tbody> avec les mêmes numéros de <th> et <td> a résolu mon problème.
Cela me rend 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();
});**
Je peux être généré par un champ aoColumns. Comme indiqué ici
aoColumns: Si spécifié, la longueur de ce tableau doit être égale à au nombre de colonnes de la table HTML d'origine. Utilisez 'null' où vous souhaitez utiliser uniquement les valeurs par défaut et automatiquement détecté options.
Ensuite, vous devez ajouter des champs comme dans le tableau Columns
...
aoColumnDefs: [
null,
null,
null,
{ "bSortable": false },
null,
],
...
Astuces 1:
Reportez-vous à ce lien, vous obtenez quelques idées:
Astuces 2:
Vérifiez que le suivi est correct:
- S'il vous plaît vérifier la Jquery Vesion
- Veuillez vérifier la version de vos fichiers CDN ou de vos fichiers .min & css liés aux données locales
- votre table a des balises
<thead></thead>&<tbody></tbody> - Votre table En-tête Longueur des colonnes identique à Corps Longueur des colonnes
- Votre Utilisation de certains paramètres dans
style='display:none'comme la même propriété s’applique à votre en-tête et à votre corps. - les colonnes de votre table ne sont pas vides, utilisez quelque chose comme [Null, -, NA, Nil]
- Votre table est bien une sans numéro
<td>, <tr>
J'ai fait face à la même erreur lorsque j'ai essayé d'ajouter colspan à la dernière
<table>
<thead>
<tr>
<th> </th> <!-- column 1 -->
<th colspan="2"> </th> <!-- column 2&3 -->
</tr>
</thead>
<tbody>
<tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
</tr>
</tbody>
</table>
et résolu en ajoutant une colonne cachée à la fin de tr
<thead>
<tr>
<th> </th> <!-- column 1 -->
<th colspan="2"> </th> <!-- column 2&3 -->
<!-- hidden column 4 for proper DataTable applying -->
<th style="display: none"></th>
</tr>
</thead>
<tbody>
<tr>
<tr> </tr>
<tr> </tr>
<tr> </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 élément th, mais peut être appliqué si colspan est utilisé dans un élément intermédiaire.
Cette solution est un peu compliquée, mais plus simple et plus courte que toute autre solution que j'ai trouvée.
J'espère que cela aidera quelqu'un.
Vous devez envelopper vos lignes dans <thead> pour les en-têtes de colonne et <tbody> pour les lignes. Assurez-vous également que vous avez non. des en-têtes de colonne <th> comme vous le faites pour la variable td