2012-09-05 39 views
17

我有問題讓jQuery Datatables庫在我的Joomla網站表上正常顯示。 http://datatables.netTypeError:當使用jQuery Datatables庫時,oColumn是未定義的

該腳本是造型我的表的一半,然後放棄(我得到表頭顏色改變和文字顏色,但沒有數據表控件等)。

螢火蟲也拋出了以下錯誤:

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> 

回答

28

對於DataTable中正常工作,您的表必須有一個適當的<thead><tbody>標籤來構建。

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

謝謝,這是我在同一時間點擊下面輸入的內容:-D –

+0

@IainSimpson是的,我剛剛遇到了這個問題,所以它正好在我頭頂! – hsalama

+0

偉大help..thank你.. – Charmie

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 

        ] 
        }); 
+0

nCell是undefined –

4

排序呢!,事實數據表是非常嚴格的關於它接受它拋出一個錯誤之前的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> 
3

希望這會幫助你的一切,至少要得到一個暗示出它。

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

我的問題是,類型錯誤:山坳是不確定的。

總結答:

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.

您可以閱讀波紋管的解釋:

的問題是,我沒有把THEAD部分中足夠的Th或TD元素相等到我打印爲TBody節內Tr元素內的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>" 

但僅僅增加一個個元素於TR元件的的THEAD元素內提出它的工作原理就像一個魅力! :)我從上面的鏈接得到了提示。

還有,我發現所有的THEAD的Tr的元素中的TH元素可以td元素也一樣,它也是有效的HTML由jQuery的數據表所要求的水平!

希望我幫你們中的一些,以節省您的時間! :)

相關問題