Problema DataTables: VM9075 dataTables.min.js: 24Uncaught TypeError: Impossibile impostare la proprietà '_DT_CellIndex' di indefinito

Question

Ho appena iniziato a utilizzare DataTable e tutto funziona correttamente durante la creazione della tabella.

Quando visualizzo 5, 24, 47 righe nella mia tabella, DataTables si comporta come mi aspetterei.

ma ho questo tabella che ha circa 700 righe e ottengo l'errore in Google Chrome,

"VM9075 dataTables.min.js:24Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined " 

e in 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" 

non ho jQuery incluso due volte btw.

Non so come procedere da qui.

Ho provato a utilizzare la versione non completata del file .js per eseguire il debug di più me stesso, ma ho continuato a ottenere un metodo "ext" o la proprietà è indefinita e non è stato possibile risolvere il problema.

Qualsiasi aiuto è apprezzato!

Answer 1

ho capito

Il problema più grande non è stato sapendo esattamente cosa questo errore in realtà voleva dire. Nel mio caso significava "il numero di ogni elemento <td> nella tabella figlio di un elemento <tr> non corrisponde al numero di elementi <th> figlio dell'elemento <thead>".

Il mio tavolo è stato generato dal server, e alcuni degli <tr> elementi avuto 27 <td> figli (che stava riempiendo l'intera larghezza della tabella, ma alcuni degli <tr> elementi avevano solo 3, 4 o 5, ... <td> bambino elementi che non è una tabella valida.

ho risolto con l'aggiunta di vuoti <td> elementi nella mia tabella per i <tr> elementi che mancava il numero corretto di elementi <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     
       } 
      } 
     } 
    } 
}; 

Modifica 1:

È passato un po 'di tempo e questa domanda ha ancora molti punti di vista. Da allora ho aggiornato il codice.

ho sostituito la prima riga di codice con la seconda linea per essere più generale

var numberOfColumnsInHeadTag = tableToWorkOn.children[1].children[0].children.length; 

var numberOfColumnsInHeadTag = tableToWorkOn.querySelectorAll('thead')[0].querySelectorAll('th'); 

Praticamente ovunque nel codice prima di vedere i children.children ho sostituito che con la querySelectorAll (. ..) Funzione.

Utilizza selettori css che lo rendono incredibilmente potente.

soggiorno benedetto

Answer 2

di tenere sempre a quattro colonne, ma a volte si riceverà o aggiungere nulla td o uno solo td, conteggio td abbinare sempre con colonna totale quindi quando non ha record di poi fare td come segue.

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

Answer 3

Come risposto da Coty, il problema risiede nella mancata corrispondenza di td elementi generati nell'intestazione e corpo della tavola.

Vorrei evidenziare uno dei motivi per cui può verificarsi (per gli utenti .Net). Se i numeri di pagina vengono visualizzati alla fine di gridview, possono disturbare la struttura della tabella.

Rimuovi AllowPaging = "true" dal tuo gridview per risolvere questo. E non preoccuparti perché Datatable gestisce il paging.

Answer 4

Ran in questo stesso problema e implementato la stessa soluzione (essenzialmente) in jquery basata su Coty. Spero che questo aiuti qualcuno. :)

$('.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>'); 
     } 

    }); 

}); 

Answer 5

$('.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>'); 
     } 
    }); 
});