为啥我在使用 jquery 数据表时出现这种类型的错误“TypeError：oColumn is undefined”，我从它的文档中全部遵循

Posted 2023-05-09

技术标签:

【中文标题】为啥我在使用 jquery 数据表时出现这种类型的错误“TypeError：oColumn is undefined”，我从它的文档中全部遵循【英文标题】：Why I am having this type of error "TypeError: oColumn is undefined" using jquery datatables I followed all from its docs为什么我在使用 jquery 数据表时出现这种类型的错误“TypeError：oColumn is undefined”，我从它的文档中全部遵循 【发布时间】：2012-09-21 10:10:07 【问题描述】：

为什么我在使用 jquery 数据表时遇到这种类型的错误“TypeError: oColumn is undefined” 我遵循了其文档中的所有说明。不知道怎么回事？

这是萤火虫的错误输出：

这是我的 html 表结构：

这是我使用的 jquery 代码：

<style type="text/css" title="currentStyle">
    @import "datatables/media/css/demo_table.css";
</style>
<script src="datatables/media/js/jquery.dataTables.js"></script>
<script>
    $(document).ready(function() 
            $('#products-result').dataTable( 
                "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
             );
            $.extend( $.fn.dataTableExt.oStdClasses, 
            "sWrapper": "dataTables_wrapper form-inline"
         );
     );
</script>

jquery 生成的表：

$.ajax(
        url: 'get-products.php',
        type: 'post',
        datatype: 'json',
        data:  category: $('.category').val().trim(), keyword: $('.keyword').val().trim() ,
        beforeSend: fnLoadStart,
        complete: fnLoadStop,
        success: function(data)
            var toAppend = '';

            toAppend += '<thead><tr><th>Name</th><th>Image</th><th>Price</th><th>Shipping</th><th>Weight</th><th>Dimension</th><th>ASIN</th><th>Description</th><th>Reviews</th><th>Category</th></tr></thead>';
            toAppend += '<tbody>';

            if(typeof data === "object")
                for(var i=0;i<data.length;i++)

                    var price = '';
                    if(data[i]['price'] === null)
                        price = 'No Price Available';
                    
                    else 
                        price = data[i]['price'][0];
                    
                    var img = '';
                    if(data[i]['image'] === null)
                        img = '<img class="no-image" src="no-image.jpg" >';
                    
                    else 
                        img = '<img src="'+data[i]['image'][0]+'" >';
                    
                    var description = '';
                    if(data[i]['product_description'] == 'Not Available')
                        description = data[i]['product_description'];
                    
                    else 
                        description = data[i]['product_description'][0];
                    

                    toAppend += 
                    '<tr><td><p>'+
                    data[i]['product_name'][0]+'</p></td><td>'+
                    img+'</td><td>'+
                    price+'</td><td><ul><li><span>Standard: </span>'+
                    data[i]['standard_shipping']+'</li><li><span>Expedited: </span>'+
                    data[i]['expedited_shipping']+'</li><li><span>Two-day: </span>'+
                    data[i]['twoday_shipping']+'</li><li><span>One-day: </span>'+
                    data[i]['oneday_shipping']+'</li></ul></td><td>'+
                    data[i]['weight']+'</td><td>'+
                    data[i]['dimension']+'</td><td>'+
                    data[i]['asin'][0]+'</td><td><p>'+
                    description+'</p></td><td><iframe src="'+
                    data[i]['reviews'][0]+'"></iframe></td><td>'+
                    data[i]['category'][0]+'</td></tr>';
                

                toAppend += '</tbody>';

                $('.data-results').append(toAppend);
            
        
    );

HTML 表格

<div>
    <table id="products-result" class="display data-results table table-striped table-hover table-bordered">

    </table>
</div>

浏览器查看源代码：

    <!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Products</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="js/main.js"></script>
    <script src="js/search.js"></script>

    <style type="text/css" title="currentStyle">
        @import "datatables/media/css/demo_table.css";
    </style>
    <script src="datatables/media/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function() 
                $('#products-result').dataTable( 
                    "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
                 );
                $.extend( $.fn.dataTableExt.oStdClasses, 
                "sWrapper": "dataTables_wrapper form-inline"
             );
         );
    </script>

</head>
<body>

<div>

    <div class="span7">
        <form class="form-inline">
            <select class="category">x
                <option>All</option>
                <option>Apparel</option>
                <option>Appliances</option>
                <option>ArtsAndCrafts</option>
                <option>Automotive</option>
                <option>Baby</option>
                <option>Beauty</option>
                <option>Blended</option>
                <option>Books</option>
                <option>Classical</option>
                <option>Collectibles</option>
                <option>DVD</option>
                <option>DigitalMusic</option>
                <option>Electronics</option>
                <option>GiftCards</option>
                <option>GourmetFood</option>
                <option>Grocery</option>
                <option>HealthPersonalCare</option>
                <option>HomeGarden</option>
                <option>Industrial</option>
                <option>Jewelry</option>
                <option>KindleStore</option>
                <option>Kitchen</option>
                <option>LawnAndGarden</option>
                <option>Marketplace</option>
                <option>MP3Downloads</option>
                <option>Magazines</option>
                <option>Miscellaneous</option>
                <option>Music</option>
                <option>MusicTracks</option>
                <option>MusicalInstruments</option>
                <option>MobileApps</option>
                <option>OfficeProducts</option>
                <option>OutdoorLiving</option>
                <option>PCHardware</option>
                <option>PetSupplies</option>
                <option>Photo</option>
                <option>Shoes</option>
                <option>Software</option>
                <option>SportingGoods</option>
                <option>Tools</option>
                <option>Toys</option>
                <option>UnboxVideo</option>
                <option>VHS</option>
                <option>Video</option>
                <option>VideoGames</option>
                <option>Watches</option>
                <option>Wireless</option>
                <option>WirelessAccessories</option>
            </select>
            <input class="keyword" type="text" placeholder="Keyword">
            <input type="button" class="btnresult btn" value="Generate">
        </form>
    </div>

    <div id="ajaxLoader">
        <img src="loading.gif" >
    </div>

    <div>
        <table id="products-result" class="display data-results table table-striped table-hover table-bordered">

        </table>
    </div>

</div>

</body>
</html>

【问题讨论】：

你能把你的代码生成的html贴出来吗？喜欢查看源代码？ @hsalama，你有点乱，更新了！ :) 您能否从生成的代码（从您的浏览器查看源代码）中复制而不是您自己的代码。我有兴趣在应用插件时查看表格的最终结构。您能否提供您所关注的文档示例的链接？检查这个答案 - ***.com/questions/12280900/… 【参考方案1】：

希望这会对大家有所帮助，至少可以从中得到一些提示。

http://datatables.net/forums/discussion/comment/42607

我的问题是，TypeError: col is undefined.

总结答案：

THad 内 TR 元素内的 TH 元素数表的元素必须等于 TD 元素的数量（或的 TR 元素中的表行中的列数）表中的 TBody。

您可以阅读下面的解释：

问题是，我没有在 thead 部分中放置足够的 Th 或 Td 元素，以等于我在 TBody 部分的 Tr 元素中打印为 Td 元素的列数。

以下代码确实给了我错误。

<thead>
 <tr>
    <th> Heading 1</th>
    <th> Heading 2</th>
 </tr>
</thead>
<tbody>
 <tr>
    <td> Column 1 </td>
    <td> Column 2</td>
    <td> Column 3</td>
 </tr>
</tbody>"

但是，只要在 THead 元素中的 Tr 元素中再添加一个 Th 元素，它就可以像魅力一样发挥作用！ :) 我从上面的链接中得到了提示。

另外，我发现 THead 的 Tr 元素中的所有 TH 元素也可以是 TD 元素，因为它也是 jQuery DataTables 所需级别的有效 HTML！

希望我能帮助你们中的一些人节省您的时间！ :)

【讨论】：

为我节省了很多时间，谢谢！我有正确的计数，但没有把它们放在一个thead和tbody中 :-) 不客气！很高兴知道，这对某人有帮助！【参考方案2】：

好的，看起来您的表在加载时是空的，所以datatables 可能无法正常工作，因为它的格式不正确。因此，我建议您先使用适当的 HTML 构建表格，然后再通过 ajax 填充它。所以试着做这个

<div>
    <table id="products-result" class="display data-results table table-striped table-hover table-bordered">
            <thead><tr><th>Name</th><th>Image</th><th>Price</th><th>Shipping</th><th>Weight</th><th>Dimension</th><th>ASIN</th><th>Description</th><th>Reviews</th><th>Category</th></tr></thead>
    <tbody></tbody>
    </table>
</div>

然后通过您的 ajax 附加到 tbody

【讨论】：

它运行不正常，即使我显示了值并且当我点击它时它没有排序，它也说表中没有可用的数据现在可以了，我只是将我的数据表函数放入 fnloadStop!，【参考方案3】：

我遇到的问题：TypeError: col is undefined.

请检查表中的两件事，此错误可能是由于以下两个原因之一：

原因 1) TR 中的 TH 和 TD 元素数量不匹配，两者计数应该相等。

例如：下表是错误的，因为它有 2 个 TH 和 3 个 TR

'<table>
<thead>
 <tr>
    <th> Field Caption 1</th>
    <th> Field Caption 2</th>
 </tr>
</thead>
<tbody>
 <tr>
    <td> Field Value 1 </td>
    <td> Field Value 2</td>
    <td> Field Value 3</td>
 </tr>
</tbody>
</table>`

原因 2) 如果您在表格中错误地使用了 'colspan' 和 'rowspan'，您可能会遇到这个问题。

`<table>
<thead>
 <tr>
    <th> Field Caption 1</th>
    <th colspan="2"> Actions</th>
 </tr>
</thead>
<tbody>
 <tr>
    <td> Field Value 1 </td>
    <td> Edit</td>
    <td> Delete</td>
 </tr>
</tbody>
</table>`

尝试删除或纠正“colspan”和“rowspan”，然后尝试。

希望它会有所帮助。

【讨论】：

以上是关于为啥我在使用 jquery 数据表时出现这种类型的错误“TypeError：oColumn is undefined”，我从它的文档中全部遵循的主要内容，如果未能解决你的问题，请参考以下文章

为啥我在 Scriptella 中输出 CSV 文件时出现双引号？

尝试从常量 char * 类型的指针复制数据时出现“超出内存访问”错误。为啥？

为啥我在删除 char* 时出现内存异常

当我在 python 中加载数据帧时出现 UnicodeDecodeError [重复]

为啥我在为 Flutter 使用 codemagic 构建代码时出现“无法为 iOS 构建”？

为啥我在使用 java.util.zip.ZipFile 打开空 ZIP 文件时出现异常？