TypeError:oColumn在使用jQuery Datatables库时未定义 - TypeError: oColumn is undefined When Using jQuery Datatables Library

我在让jQuery Datatables库正确显示在我的Joomla网站表上时遇到问题。http://datatables.net

脚本对我的表进行了一半的样式设置，然后放弃了（我正在更改表标题的颜色和文本颜色，但没有数据表控件等）。

Firebug还抛出以下错误：

 TypeError: oColumn is undefined

在我的Joomla模板index.php中，我在<head>:中有以下内容

<script src="./datatables/js/jquery.js" type="text/javascript"></script>
<script src="./datatables/js/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript"> 
    jQuery.noConflict();                
    jQuery(document).ready(function() {
    jQuery('#staff_table').dataTable({
        "bLengthChange": true,
        "bFilter": true,
        "bSort": true,
        "bInfo": true,
        "bAutoWidth": true
        } );
    } );
</script>

HTML/PHP看起来像这样：

<h3>Members of Staff</h3>
<p>If you're looking for a member of staff at Tower Road Academy, you'll find their details here.</p>
<table class="staff_table" id="staff_table">
    <tr class="staff_table_head">
        <th>Name</th>
        <th>Job Title</th>
        <th>Email Address</th>
    </tr>
    <?php
        $result = mysql_query("SELECT * FROM itsnb_chronoforms_data_addstaffmember");
        while($row = mysql_fetch_array($result))
        { 
        echo '<tr>';  
        echo '<td>' . $row['staff_name'] . '</td><td>' . $row['staff_job'] . '</td><td><a     href=mailto:"' . $row['staff_email'] . '">' . $row['staff_email'] . '</a>' . '</td>';
        echo '</tr>';
        }
    ?>
</table>

要使数据表正常工作，必须使用正确的<thead>和<tbody>标记构建表。

HTML中的所有DataTables都需要一个格式良好的<TABLE>（即有效的HTML），具有一个标头（由<THEAD> HTML标记定义）和一个正文（<TBODY>标记）

数据表文档

已排序！，事实证明，数据表在抛出错误之前对它接受的html非常严格。我在我的html中添加了标记，现在它开始工作了，还要注意，您的头列必须有标记，而不是标记，因为这也会引发错误。

html代码现在看起来是这样的：

<h3>Members of Staff</h3>
 <p>If you're looking for a member of staff at Tower Road Academy, you'll find their      details here.</p>
 <table class="staff_table" id="staff_table">
 <thead>
 <tr class="staff_table_head">
 <th>Name</th>
<th>Job Title</th>
<th>Email Address</th>
 </tr>
</thead>
 <?php
$result = mysql_query("SELECT * FROM itsnb_chronoforms_data_addstaffmember");
while($row = mysql_fetch_array($result))
   {
echo '<tr>';  
echo '<td>' . $row['staff_name'] . '</td><td>' . $row['staff_job'] . '</td><td><a         href=mailto:"' . $row['staff_email'] . '">' . $row['staff_email'] . '</a>' . '</td>';
    echo '</tr>';
  }
 ?>
</table>

调用jquery等看起来是这样的：

<script src="./datatables/js/jquery.js" type="text/javascript"></script>
    <script src="./datatables/js/jquery.dataTables.js" type="text/javascript"></script>
            <script type="text/javascript"> 
 jQuery(document).ready(function() {
jQuery('#staff_table').dataTable({
    "bLengthChange": true,
    "bFilter": true,
    "bSort": true,
    "bInfo": true,
    "bAutoWidth": true
} );
} );
  </script>

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

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

我的问题是，TypeError:col未定义。

总结答案：

TH头内TR元件内的TH元件数量表中的元素必须等于TD元素的数量（或表行中的列数）你的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！

希望我能帮你们节省时间！：）

试试这个：

jQuery('#staff_table').dataTable({
                        "bPaginate": true,
                        "bLengthChange": true,
                        "bFilter": true,
                        "bSort": true,
                        "bInfo": true,
                        "bAutoWidth": true,
                     "aoColumns": [
                                        null,
                                        null //put as many null values as your columns
                    ]
                    });