TypeError: oColumn is undefined When Using jQuery

2019-03-24 06:27发布

站内问答 / PHP
326 4 4

I am having a problem getting the jQuery Datatables library to show up properly on my Joomla website table. http://datatables.net

The script is half styling my table and then giving up (I am getting the table header colour changed and text colour, but no datatables controls etc).

Firebug is also throwing the following error:

 TypeError: oColumn is undefined

In my Joomla templates index.php I have the following in the <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>

The HTML / PHP looks like this:

<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条回答
成全新的幸福
2楼-- · 2019-03-24 06:57

Sorted it !, it turns out datatables is VERY strict about the html it accepts before it throws an error. I added tags to my html and now it is working, also note that you must have tags for your header columns and not tags as this also throws an error.

The html code now looks like this :

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

and calling the jquery etc looks like this :

<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>
查看更多
0人赞 添加讨论(0) 举报
戒情不戒烟
3楼-- · 2019-03-24 06:58

For datatable to work properly, your tables must be constructed with a proper <thead> and <tbody> tags.

All DataTables needs in your HTML is a <TABLE> which is well formed (i.e. valid HTML), with a header (defined by a <THEAD> HTML tag) and a body (a <TBODY> tag)

Datatable docs

查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
4楼-- · 2019-03-24 07:02

Hope this would help you all, at least to get a hint out of it.

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

My problem was, TypeError: col is undefined.

Summarized Answer:

Number of TH elements within the TR element within the THead element of the Table MUST BE EQUAL to the Number of TD elements(or number of columns within your Table Rows) within the TR element(s) of your TBody in the Table.

You can read the explanation bellow:

The problem was, I hadn't put enough Th or Td elements within the thead section to be equal to the number of columns which I print as Td elements inside the Tr elements within the TBody section.

Following code did give me the error.

<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>"

But just adding one more Th element to the Tr element within the THead element made it works like a charm! :) And I got the hint from the above link.

And also, I found that all the TH elements within the THead's Tr element could be TD elements too, as it's also valid HTML to the required level by the jQuery DataTables!

Hope I helped some of you to save your time! :)

查看更多
0人赞 添加讨论(0) 举报
Anthone
5楼-- · 2019-03-24 07:03

Try this:

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人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)