18

jQuery Datatables ライブラリを Joomla Web サイトのテーブルに正しく表示するのに問題があります。 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 は、ヘッダー ( HTML タグで定義) とボディ (タグ) を備え<TABLE>た整形式 (つまり、有効な HTML) です。<THEAD><TBODY>

データテーブル ドキュメント

于 2012-09-05T12:04:46.837 に答える
4

並べ替えました!、エラーをスローする前に、datatables が受け入れる 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 is undefined でした。

要約された回答:

テーブルの THead 要素内の TR 要素内の TH 要素の数は、テーブル内の TBody の TR 要素内の TD 要素の数 (またはテーブル行内の列の数) と等しくなければなりません。

以下の説明を読むことができます。

問題は、TBody セクション内の Tr 要素内の Td 要素として印刷する列の数と等しくなるように、thad セクション内に十分な Th または 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>"

しかし、Th 要素を THead 要素内の Tr 要素にもう 1 つ追加するだけで、魅力的に機能するようになりました。:)そして、上記のリンクからヒントを得ました。

また、jQuery DataTables によって必要なレベルまで有効な HTML であるため、THead の Tr 要素内のすべての TH 要素も TD 要素である可能性があることがわかりました。

時間を節約するために私があなたの何人かを助けたことを願っています! :)

于 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 に答える