0

jQuery DataTables ライブラリを使用して、Joomla 2.5 を実行している Web サイトのテーブルのスタイルを設定しています。 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>

上記は、次の行に沿って私に何かを与えるはずです: サンプル DataTables スタイル付きテーブル

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)
4

3 に答える 3

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">
于 2012-09-05T10:42:45.817 に答える
1

Datatables が正しく機能するためには<thead>とタグが必要です<tbody>

于 2012-09-05T19:48:29.333 に答える
0

エラーについては、(クエリonColumnから返された列に従って)パラメータを使用してデータテーブルを呼び出してみてください。SQL

$('#staff_table').dataTable({ "aoColumns": [{ "mDataProp": "columnname1"},{ "mDataProp": "columnname2"},...]
});
于 2012-09-15T12:21:57.717 に答える