TypeError: oColumn undefined При использовании библиотеки JQuery Datatables

У меня возникла проблема с тем, чтобы библиотека jQuery Datatables отображалась правильно на моей веб-странице Joomla. http://datatables.net

script выполняет половину стилизации моей таблицы, а затем отказывается (я получаю цвет заголовка таблицы и цвет текста, но нет элементов управления 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>

Ответ 1

Для корректной работы данных ваши таблицы должны быть сконструированы с соответствующими тегами <thead> и <tbody>.

Все необходимые DataTables в вашем HTML - это хорошо сформированный (т.е. допустимый HTML), с заголовком (определенным тегом HTML) и телом (тегом)

Datatable docs

Ответ 2

Отсортировано!, оказывается, что 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>

Ответ 3

Надеюсь, это поможет всем вам, по крайней мере, получить от него намек.

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

Моя проблема была, TypeError: col is undefined.

Обобщенный ответ:

Число элементов TH внутри элемента TR внутри THead элемент таблицы ДОЛЖЕН БЫТЬ РАВНО к количеству элементов TD (или количество столбцов в строках таблицы) в элементе (-ях) TR ваш TBody в таблице.

Вы можете прочитать пояснение ниже:

Проблема заключалась в том, что я не поставил достаточно элементов Th или Td в секции thead равным количеству столбцов, которые я печатаю как элементы Td внутри элементов Tr в разделе TBody.

Следующий код действительно дал мне ошибку.

<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 к элементу Tr в элементе THead, он работает как шарм!:) И я получил подсказку из приведенной выше ссылки.

И также я обнаружил, что все элементы TH в элементе THead Tr также могут быть элементами TD, так как он также корректно обрабатывает HTML до требуемого уровня с помощью данных jQuery DataTables!

Надеюсь, я помог некоторым из вас сэкономить ваше время!:)

Ответ 4

Попробуйте следующее:

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

                    ]
                    });