Вывод DataTables: VM9075 dataTables.min.js: 24Uncaught TypeError: Невозможно установить свойство '_DT_CellIndex' из undefined

Ответ 1

Я понял это

Самая большая проблема заключалась не в том, чтобы точно знать, что именно эта ошибка имела в виду. В моем случае это означало "число каждого элемента <td> в вашей таблице, являющегося дочерним элементом элемента <tr>, не соответствует количеству элементов <th>, которые являются дочерними элементами элемента <thead>".

Моя таблица генерировалась сервером, а некоторые из элементов <tr> имели 27 <td> детей (которые заполняли всю ширину таблицы вверх, но некоторые из элементов <tr> имели только 3, 4 или 5,... <td> дочерние элементы, которые не являются допустимой таблицей.

Я решил это, добавив пустые элементы <td> в мою таблицу для элементов <tr>, которым не хватало правильного количества элементов <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                   
                }
            }
        }
    }
};

Изменить 1:

Прошло некоторое время, и этот вопрос по-прежнему вызывает кучу взглядов. С тех пор я обновил код.

Я заменил первую строку кода второй строкой на более общую

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

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

Довольно многое, когда в предыдущем коде вы видите children.children, я заменил его функцией querySelectorAll (...).

Он использует селектор css, который делает его удивительно мощным.

оставаться благословленным

Ответ 2

Как ответил Коти, проблема заключается в несоответствии элементов td, сгенерированных в заголовке и теле таблицы.

Я хотел бы выделить одну из причин, почему это может произойти (для .Net Users). Если номера страниц отображаются в конце gridview, они могут нарушить структуру таблицы.

Удалите AllowPaging = "true" из вашего gridview, чтобы решить эту проблему. И не беспокойтесь, потому что Datatable обрабатывает пейджинг.

Ответ 3

Подходим к этой же проблеме и реализуем это же решение (по существу) в jquery на основе Coty's. Надеюсь, это поможет кому-то.:)

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

    });

});

Ответ 4

вы всегда держите четыре столбца, но иногда вы получаете или добавляете null td, или только один счетчик td, td всегда совпадает с общим столбцом, поэтому, когда у вас нет записи, сделайте td следующим.

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

Ответ 5

эта ошибка также может быть вызвана, если вы попытаетесь установить параметры для адаптивного расширения для большего количества столбцов, чем у вас.

Ответ 6

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