DataTables问题:VM9075 dataTables.min.js:24Uncaught TypeError:无法设置未定义的属性'_DT_CellIndex'

Question

我刚开始使用DataTables,在创建表时一切正常.

当我在表格中显示5,24,47行时,DataTables的行为与我期望的一样.

但我有这个表有大约700行,我在谷歌Chrome中得到错误,

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

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

我没有包含两次btw​​的jQuery.

我不知道怎么从这里开始.

我试图使用.js文件的未经编译的版本来自己调试它,但我不断得到一个"ext"方法或属性未定义,也无法解决.

任何帮助表示赞赏!

Answer 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选择器,这使它非常强大.

祝好运

Answer 2

进入同样的问题并在基于Coty的jquery中实现了相同的解决方案(基本上).希望这有助于某人.:)

$( '.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 3

正如Coty所回答的,问题在于表头和表体中生成的td元素不匹配.

我想强调一下它可能发生的原因之一(对于.Net用户).如果在gridview的末尾显示页码,它们可能会破坏表结构.

从gridview中删除AllowPaging ="true"以解决此问题.并且不用担心,因为Datatable处理Paging.