18

我在让 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>
4

4 回答 4

29

为了使数据表正常工作，您的表必须使用适当的<thead>和<tbody>标签构建。

HTML 中所有需要的 DataTables 都是格式<TABLE>良好的（即有效的 HTML），带有标题（由<THEAD>HTML 标签定义）和正文（<TBODY>标签）

数据表文档

于 2012-09-05T12:04:46.837 回答
4

排序它！，事实证明数据表在抛出错误之前对它接受的 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>
于 2012-09-05T12:09:04.993 回答
3

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

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

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

总结答案：

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

你可以阅读下面的解释：

问题是，我没有在 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！

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

于 2013-12-19T06:29:55.007 回答
0

试试这个：

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

                    ]
                    });
于 2012-09-05T12:01:24.703 回答