jQuery Tabletools 没有按预期工作答案

【问题标题】：jQuery Tabletools not working as expectedjQuery Tabletools 没有按预期工作
【发布时间】：2016-12-05 21:14:34
【问题描述】：

我正在使用 jQuery DataTables 库为运行 Joomla 2.5 的网站上的表格设置样式。 http://datatables.net/

我遇到的问题是它不工作，但它也没有在 firebug 中给出任何类型的错误，所以我没有跟踪或任何东西。

我的表格的 HTML / PHP 是这样的：

<table class="staff_table">
<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>
<tr class="staff_table_head">
<td>Name</td>
<td>Job Title</td>
<td>Email Address</td>
</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>

我正在加载 jQuery 和 DataTables 库并在模板文件的 index.php 中像这样初始化它：

<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">             
$(document).ready(function() {
$('#staff_table').dataTable();
} );

 </script>

上面应该给我一些类似于以下内容的东西：

jQuery 确实可以正常工作，就好像我使用下面的一样，它会按预期弹出一个框：

$(document).ready(function() {
   alert('hi');
});

我什至尝试过 jQuery No Conflict，在调用函数之前添加 jQuery.noConflict();，但仍然没有，没有错误，没有工作。

编辑

如果我更改为以下内容，则会收到以下错误：

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

 </script>

这是我在 Firebug 中遇到的错误：

TypeError: oColumn is undefined
initialize(b=Object { tweakInitial={...}, tweakSubsequent={...}, tweakSizes={...},     more...}, a=Object { options={...}, element=ul.menutop, rtl=false, more...}, c=span#span-    1346841479204301.daddy)fusion.js (line 8)
initialize()mootools-more.js (line 27)
b()mootools-core.js (line 140)
g()mootools-core.js (line 135)
initialize(o=span#span-1346841479204301.daddy, m=1)fusion.js (line 8)
forEach(i=function(), v=Object { options={...}, element=ul.menutop, rtl=false,     more...})mootools-core.js (line 39)
initialize(f="ul.menutop", k=Object { pill=0, effect="slide and fade", opacity=1,     more...})fusion.js (line 8)
initialize()mootools-more.js (line 27)
b()mootools-core.js (line 140)
g()mootools-core.js (line 135)
(?)()school-staff (line 77)
fireEvent(f=function())mootools-core.js (line 370)
forEach(i=function(), v=Window school-staff)mootools-core.js (line 39)
fireEvent(e="domready", c=[], b=undefined)mootools-core.js (line 370)
g()mootools-core.js (line 507)
[Break On This Error]   

...start({"margin-top":this.height,opacity:0}).chain(function(){if(this.childMenu.f...

fusion.js (line 8)

【问题讨论】：

您将一个类分配给表<table class="staff_table">，但在JS 中选择它作为id $('#staff_table')。这可能会解决它吗？
我确实注意到了一秒钟前并为该表分配了一个 id 或 staff_table，但它似乎没有解决任何问题。

标签： jquery jquery-ui datatables html-table tabletools

【解决方案1】：

表格的 html 开头如下：

<table class="staff_table">
<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>
<tr class="staff_table_head">

h3 和 p 标签在表格中是不合法的。尝试将它们移出表格，例如：

<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">
<tr class="staff_table_head">

【讨论】：

谢谢，我尝试了您的解决方案，但仍然遇到同样的问题，在上面进行了我的编辑之后 ^^ 我现在收到 TypeError: oColumn is undefined also.

【解决方案2】：

数据表需要<thead> 和<tbody> 标签才能正常工作

【讨论】：

【解决方案3】：

关于onColumn 错误，尝试使用参数调用您的数据表（根据您从SQL 查询返回的列）：

$('#staff_table').dataTable({ "aoColumns": [{ "mDataProp": "columnname1"},{ "mDataProp": "columnname2"},...]
});

【讨论】：