Javascript DataTables问题：VM9075 DataTables.min.js:24未捕获类型错误：无法设置属性'_DT#U CellIndex'；未定义的

我刚开始使用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"

顺便说一句，我没有两次包含jQuery

我不知道如何从这里开始

我试图使用未统一版本的.js文件自己调试它，但我一直得到一个“ext”方法或属性未定义，也无法修复

感谢您的帮助

我明白了

最大的问题是不知道这个错误到底意味着什么。 在我的例子中，它意味着“表中作为

元素的子元素的每个

元素的数量与作为

元素的子元素的

元素的数量不匹配。”

我的表是由服务器生成的，一些

元素有27个子元素（这占据了整个表的宽度，但是一些

元素只有3、4或5，…

子元素不是有效的表）

我通过在表中为缺少正确数量的

元素的

元素添加空的

元素来解决这个问题

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

在前面的代码中，您几乎可以看到children.children，我将其替换为querySelectorAll（…）函数

它使用css选择器，使其功能强大得惊人

---

保持幸福

您始终保持四列，但有时您会收到或追加空的

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>

否
名称
地方
价格
----------------------------------------   
找不到数据。

正如科蒂所回答的，问题在于td元素在表头和表体中的不匹配

我想强调一下为什么会发生这种情况的原因之一（对于.Net用户）。 如果页码显示在gridview的末尾，它们可能会破坏表结构

从gridview中删除AllowPaging=“true”以解决此问题。

---

不用担心，因为Datatable处理分页。

遇到了同样的问题，并在基于Coty的jquery中实现了同样的解决方案（基本上）。希望这对其他人有所帮助。：）

$（'.table'）。每个（函数（i）{
var工作台=$（此）；
var num_head_columns=工作台.find（'thead tr th'）。长度；
var rows_to_validate=工作台.find（'tbody tr'）；
行到行验证。每个（函数（i）{
var row_columns=$（this）.find（'td'）.length；
对于（i=$（this）.find（'td'）.length；i
$（'.table'）。每个（函数（i）{
var工作台=$（此）；
var num_head_columns=工作台.find（'thead tr th'）。长度；
var rows_to_validate=工作台.find（'tbody tr'）；
行到行验证。每个（函数（i）{
var row_columns=$（this）.find（'td'）.length；
对于（i=$（this）.find（'td'）.length；i
如果您尝试为设置选项以获得比您拥有的更多的列，也会触发此错误
 这是使用静态HTML表吗？如果是，您能注释掉DataTable调用并检查它是否是有效的HTML吗？而且，你没有做任何像横向或纵向合并单元格这样的花哨的事情，是吗？也许可以使用JSFIDLE并链接到它，这样我们就可以更好地了解发生了什么？很明显，您的问题与您的代码有关，而不是与错误消息有关-因此请显示您的代码。添加空列为我解决了此问题。非常感谢！谢谢阿披实。我还通过从gridview中删除AllowPaging=“true”解决了这个问题
<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>

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

    });

});

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