Problème DataTables: VM9075 dataTables.min.js: 24Uncaught TypeError: Impossible de définir la propriété '_DT_CellIndex' sur undefined

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