Question

我刚开始使用DataTables，在创建表格时一切正常。

当我在表格中显示5,24,47行时，DataTables就像我期望的那样。

但是我的这个表有大约700行，我在谷歌浏览器中收到了错误

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

我没有把bQuery包括两次顺便说一句。

我不确定如何从这里开始。

我尝试使用.js文件的未经编译的版本来自己调试它，但我不断得到一个＆＃34; ext＆＃34;方法或属性未定义，也无法修复。

感谢任何帮助！

Answer 1

我想通了

最大的问题是不确切知道这个错误究竟意味着什么。就我而言，它意味着“表格中<td>元素的每个<tr>元素的数量与<th>元素的子元素的数量不匹配。<thead>元素的数量与<tr>元素。“

我的表是由服务器生成的，有些<td>个元素有27个<tr>个子元素（它们填满了表格的整个宽度，但有些{{1} }元素只有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：

已经有一段时间了，这个问题仍然有很多观点。我已经更新了代码。

我用第二行替换了第一行代码，使其更加 general

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

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

在前面的代码中你看到child.children，我用querySelectorAll（...）函数替换了它。

它使用css选择器，这使它非常强大。

保持幸福

Answer 2

正如Coty所回答的那样，问题在于表格标题和正文中生成的 td 元素不匹配。

我想强调其可能发生的原因之一（对于.Net用户）。如果在网格视图的末尾显示页码，它们可能会破坏表格结构。

从gridview中删除 AllowPaging =＆＃34; true＆＃34; 来解决此问题。并且不用担心，因为Datatable处理Paging。

Answer 3

进入同样的问题并在基于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 4

您始终保留四列，但有时您会收到或追加空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>

Answer 5

如果您尝试为responsive extension设置选项以获取更多列，也可能触发此错误。

Answer 6

var customerOrders = customers.SelectMany(
  c => orders.Where(o => o.CustomerId == c.Id)
    .Select(p => new {CustomerId = c.Id, OrderDescription = p.Description}));

DataTables问题：VM9075 dataTables.min.js：24Uncaught TypeError：无法设置属性＆＃39; _DT_CellIndex＆＃39;未定义的

6 个答案: