web-dev-qa-db-ja.com

TypeError：jQuery Datatablesライブラリを使用すると、oColumnが未定義になります

JQueryDatatablesライブラリをJoomlaWebサイトテーブルに正しく表示するのに問題があります。 http://datatables.net

スクリプトはテーブルのスタイルを半分にしてからあきらめています（テーブルヘッダーの色とテキストの色が変更されていますが、datatablesコントロールなどはありません）。

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>
phpjqueryhtmldatatableshtml-table
18
Iain Simpson

Datatableを正しく機能させるには、テーブルを適切な<thead>タグと<tbody>タグで作成する必要があります。

HTMLで必要なすべてのDataTablesは<TABLE>であり、ヘッダー（<THEAD> HTMLタグで定義）と本文（<TBODY>タグ）を備えた整形式（つまり有効なHTML）です。

Datatableドキュメント

29
Hazem Salama

並べ替えると、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>
4
Iain Simpson

少なくともそれからヒントを得るために、これがあなた方全員に役立つことを願っています。

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

私の問題は、TypeError：colが未定義です。

要約された回答：

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

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

問題は、TBodyセクション内のTr要素内にTd要素として印刷する列の数と同じ数のThまたはTd要素をtadセクション内に配置していなかったことです。

次のコードは私にエラーを与えました。

<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要素をもう1つ追加するだけで、魅力のように機能します。 :)そして私は上記のリンクからヒントを得ました。

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

私があなたの何人かがあなたの時間を節約するのを手伝ったことを願っています！ :)

3
Randika Vishman

これを試して：

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

                    ]
                    });
0
Alessandro Minoccheri