Je viens de commencer à utiliser DataTables et tout fonctionne bien lors de la création de la table.
Lorsque j'affiche 5, 24, 47 lignes dans ma table, DataTables se comporte comme je m'y attendais.
Mais j'ai ce tableau qui contient environ 700 lignes et j'obtiens l'erreur dans Google Chrome,
"VM9075 dataTables.min.js:24Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined "
Et dans IE 9,
"SCRIPT5007: Unable to set value of the property '_DT_CellIndex': object is null or undefined
jquery-1.10.2.min.js, line 4 character 2367"
Je n'ai pas jQuery inclus deux fois btw.
Je ne sais pas comment procéder à partir d'ici.
J'ai essayé d'utiliser la version non minimisée du fichier .js pour le déboguer davantage moi-même mais j'ai continué à obtenir une méthode ou une propriété "ext" non définie et je n'ai pas pu résoudre ce problème non plus.
Toute aide est appréciée!
6 réponses
Je l'ai compris
Le plus gros problème était de ne pas savoir exactement ce que cette erreur signifiait réellement. Dans mon cas, cela signifiait que "le nombre de chaque élément <td> de votre table qui est un enfant d'un élément <tr> ne correspond pas au nombre d'éléments <th> qui sont un enfant du <thead> élément. "
Ma table était générée par le serveur et certains des éléments <tr> avaient 27 enfants <td> (ce qui remplissait toute la largeur de la table, mais certains des éléments <tr> uniquement avait 3, 4 ou 5, ... <td> éléments enfants qui ne sont pas une table valide.
Je l'ai résolu en ajoutant des éléments <td> vides dans ma table pour les éléments <tr> qui manquaient du nombre correct d'éléments <td>
var makeTableValidObject = {
thisWasCalled: 0,
makeTableValid: function() {
var tableToWorkOn = document.getElementById("table1");
//check the number of columns in the <thead> tag
//thead //tr //th elements
var numberOfColumnsInHeadTag = tableToWorkOn.children[1].children[0].children.length;
var numberOf_trElementsToValidate = tableToWorkOn.children[2].children.length;
//now go through each <tr> in the <tbody> and see if they all match the length of the thead columns
//tbody //all trs//all tds elements
//tableToWorkOn.children[2].children.children);
for(var i = 0; i < numberOf_trElementsToValidate; i++) {
//row my row make sure the columns have the correct number of elements
var tdColumnArray = tableToWorkOn.children[2].children[i].children
var trElementToAppendToIfNeeded = tableToWorkOn.children[2].children[i];
if(tdColumnArray.length != numberOfColumnsInHeadTag) {
//since they don't match up, make them valid
if(tdColumnArray.length < numberOfColumnsInHeadTag) {
//add the necessary number of blank <td> tags to the <tr> element to make this <tr> valid
var tdColumnArrayLength = tdColumnArray.length;
for(var j = 0; j < (numberOfColumnsInHeadTag - tdColumnArrayLength); j++) {
var blank_tdElement = document.createElement("td");
blank_tdElement.id = "validating_tdId" + i + "_" + j;
trElementToAppendToIfNeeded.appendChild(blank_tdElement);
}
}
else {
//TODO: remove <td> tags to make this <tr> valid if necessary
}
}
}
}
};
Modifier 1:
Cela fait un certain temps et cette question suscite encore de nombreuses opinions. J'ai depuis mis à jour le code.
J'ai remplacé la première ligne de code par la deuxième ligne pour être plus général
var numberOfColumnsInHeadTag = tableToWorkOn.children[1].children[0].children.length;
var numberOfColumnsInHeadTag = tableToWorkOn.querySelectorAll('thead')[0].querySelectorAll('th');
À peu près partout dans le code précédent, vous voyez les enfants. J'ai remplacé cela par la fonction querySelectorAll (...).
Il utilise des sélecteurs CSS qui le rendent incroyablement puissant.
Reste béni
Comme l'a répondu Coty, le problème réside dans l'inadéquation des éléments td générés dans l'en-tête et le corps du tableau.
Je voudrais souligner l'une des raisons pour lesquelles cela peut se produire (pour les utilisateurs .Net). Si les numéros de page sont affichés à la fin de la vue de grille, ils peuvent perturber la structure de la table.
Supprimez AllowPaging = "true" de votre grille pour résoudre ce problème. Et pas de soucis car Datatable gère la pagination.
Cette erreur peut également être déclenchée si vous essayez de définir des options pour extension responsive pour plus de colonnes que vous avez.
Vous gardez toujours quatre colonnes mais parfois vous recevrez ou ajouterez td nul ou un seul td, td nombre correspondra toujours avec la colonne totale donc quand vous n'avez pas d'enregistrement alors faites {{X3 }} comme suit.
<th>No</th>
<th>Name</th>
<th>place</th>
<th>Price</th>
----------------------------------------
<td colspan="4">Data not found.</td>
<td style="display: none;"></td>
<td style="display: none;"></td>
<td style="display: none;"></td>
$( '.table' ).each(function( i ) {
var worktable = $(this);
var num_head_columns = worktable.find('thead tr th').length;
var rows_to_validate = worktable.find('tbody tr');
rows_to_validate.each( function (i) {
var row_columns = $(this).find('td').length;
for (i = $(this).find('td').length; i < num_head_columns; i++) {
$(this).append('<td class="hidden"></td>');
}
});
});
Ran dans ce même problème et mis en œuvre cette même solution (essentiellement) dans jquery basé sur Coty's. J'espère que cela aide quelqu'un. :)
$( '.table' ).each(function( i ) {
var worktable = $(this);
var num_head_columns = worktable.find('thead tr th').length;
var rows_to_validate = worktable.find('tbody tr');
rows_to_validate.each( function (i) {
var row_columns = $(this).find('td').length;
for (i = $(this).find('td').length; i < num_head_columns; i++) {
$(this).append('<td class="hidden"></td>');
}
});
});