Datatables: невозможно прочитать свойство "mData" undefined

У меня есть проблема с Datatables. Я также прошел по этой ссылке, которая не дала мне никакого результата. Я включил все предпосылки для анализа данных непосредственно в DOM. Пожалуйста, помогите мне решить эту проблему.

скрипт

$(document).ready(function() {
  $('.viewCentricPage .teamCentric').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bPaginate": false,
    "bFilter": true,
    "bSort": true,
    "aaSorting": [
      [1, "asc"]
    ],
    "aoColumnDefs": [{
      "bSortable": false,
      "aTargets": [0]
    }, {
      "bSortable": true,
      "aTargets": [1]
    }, {
      "bSortable": false,
      "aTargets": [2]
    }],
  });
});

ОТВЕТЫ

Ответ 1

FYI dataTables требует хорошо сформированной таблицы. Он должен содержать теги <thead> и <tbody>, иначе выдает эту ошибку. Также убедитесь, что все ваши строки, включая строку заголовка, имеют одинаковое количество столбцов.

Следующий код выдаст ошибку (без тегов <thead> и <tbody>)

<table id="sample-table">
    <tr>
        <th>title-1</th>
        <th>title-2</th>
    </tr>
    <tr>
        <td>data-1</td>
        <td>data-2</td>
    </tr>
</table>

Следующее также выдаст ошибку (неравное количество столбцов)

<table id="sample-table">
    <thead>
        <tr>
            <th>title-1</th>
            <th>title-2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data-1</td>
            <td>data-2</td>
            <td>data-3</td>
        </tr>
    </tbody>
</table>

Для получения дополнительной информации читайте больше здесь

Ответ 2

Общей причиной для Cannot read property 'fnSetData' of undefined является несоответствующее количество столбцов, например, в этом ошибочном коде:

<thead>                 <!-- thead required -->
    <tr>                <!-- tr required -->
        <th>Rep</th>    <!-- td instead of th will also work -->
        <th>Titel</th>
                        <!-- th missing here -->
    </tr>
</thead>
<tbody>
    <tr>
        <td>Rep</td>
        <td>Titel</td>
        <td>Missing corresponding th</td>
    </tr>
</tbody>

В то время как следующий код с одним <th> за <td> (количество столбцов должно совпадать) работает:

<thead>
    <tr>
        <th>Rep</th>       <!-- 1st column -->
        <th>Titel</th>     <!-- 2nd column -->
        <th>Added th</th>  <!-- 3rd column; th added here -->
    </tr>
</thead>
<tbody>
    <tr>
        <td>Rep</td>             <!-- 1st column -->
        <td>Titel</td>           <!-- 2nd column -->
        <td>th now present</td>  <!-- 3rd column -->
    </tr>
</tbody>

Ошибка также возникает при использовании хорошо сформированного thead с colspan, но без второй строки.

Для таблицы с 7-ю столбцами следующее не работает, и мы видим "Невозможно прочитать свойство" mData "из undefined" в консоли javascript:

<thead>
    <tr>
        <th>Rep</th>
        <th>Titel</th>
        <th colspan="5">Download</th>
    </tr>
</thead>

Пока это работает:

<thead>
    <tr>
        <th rowspan="2">Rep</th>
        <th rowspan="2">Titel</th>
        <th colspan="5">Download</th>
    </tr>
    <tr>
        <th>pdf</th>
        <th>nwc</th>
        <th>nwctxt</th>
        <th>mid</th>
        <th>xml</th>
    </tr>
</thead>

Ответ 3

У меня была та же проблема с использованием данных DOM в представлении Rails, созданном с помощью генератора скаффолдов. По умолчанию представление пропускает элементы <th> для трех последних столбцов (которые содержат ссылки для отображения, скрытия и уничтожения записей). Я обнаружил, что если я добавлю заголовки для этих столбцов в элемент <th> внутри <thead>, это решит проблему.

Я не могу сказать, является ли это той же проблемой, что и у вас, так как я не вижу ваш HTML. Если это не та же проблема, вы можете использовать отладчик chrome, чтобы выяснить, в каком столбце он выдает ошибку, нажав на ошибку в консоли (которая приведет вас к коду, на котором происходит сбой), а затем добавив условное выражение. точка останова (в col==undefined). Когда он остановится, вы можете проверить переменную i чтобы увидеть, в каком столбце он находится в данный момент, и который может помочь вам выяснить, чем отличается этот столбец от других. Надеюсь, это поможет!

debugging mData error

Ответ 4

Это также может произойти, если у вас есть аргументы таблицы для таких вещей, как 'aoColumns':[..], которые не соответствуют правильному количеству столбцов. Подобные проблемы могут возникать при копировании кода с других страниц, чтобы быстро начать интеграцию с данными.

Пример:

Это не сработает:

<table id="dtable">
    <thead>
        <tr>
            <th>col 1</th>
            <th>col 2</th>
        </tr>
    </thead>
    <tbody>
        <td>data 1</td>
        <td>data 2</td>
    </tbody>
</table>
<script>
        var dTable = $('#dtable');
        dTable.DataTable({
            'order': [[ 1, 'desc' ]],
            'aoColumns': [
                null,
                null,
                null,
                null,
                null,
                null,
                {
                    'bSortable': false
                }
            ]
        });
</script>

Но это сработает:

<table id="dtable">
    <thead>
        <tr>
            <th>col 1</th>
            <th>col 2</th>
        </tr>
    </thead>
    <tbody>
        <td>data 1</td>
        <td>data 2</td>
    </tbody>
</table>
<script>
        var dTable = $('#dtable');
        dTable.DataTable({
            'order': [[ 0, 'desc' ]],
            'aoColumns': [
                null,
                {
                    'bSortable': false
                }
            ]
        });
</script>

Ответ 5

Еще одна причина, по которой это происходит, заключается в параметре columns в инициализации DataTable.

Количество столбцов должно совпадать с заголовками

"columns" : [ {
                "width" : "30%"
            }, {
                "width" : "15%"
            }, {
                "width" : "15%"
            }, {
                "width" : "30%"
            } ]

У меня было 7 колонок

<th>Full Name</th>
<th>Phone Number</th>
<th>Vehicle</th>
<th>Home Location</th>
<th>Tags</th>
<th>Current Location</th>
<th>Serving Route</th>

Ответ 6

Вам нужно удалить colspan, а число th и td должно совпадать.

Ответ 7

в моем случае эта ошибка возникла, если я использую таблицу без заголовка

              <thead>
                   <tr>
                       <th>example</th>
                  </tr>
              </thead>

Ответ 8

Советы 1:

По этой ссылке вы получите несколько идей:

https://datatables.net/forums/discussion/20273/uncaught-typeerror-cannot-read-property-mdata-of-undefined

Советы 2:

Проверьте правильность следующего:

  • Пожалуйста, проверьте Jquery Vesion
  • Пожалуйста, проверьте версию вашего CDN или локальных файлов данных .min & css, связанных с данными
  • ваша таблица имеет теги <thead></thead> & <tbody></tbody>
  • Длина столбцов заголовка таблицы такая же, как длина столбцов тела
  • Вы используете некоторые cloumns в style='display:none' как они применимы как к заголовку, так и к телу.
  • столбцы вашей таблицы не пустые, используйте что-то вроде [Null, -, NA, Nil]
  • Ваша таблица без проблем <td>, <tr>

Ответ 9

Немного другая проблема для меня из ответов, приведенных выше. Для меня разметка HTML была в порядке, но один из моих столбцов в javascript отсутствовал и не соответствовал html.

т.е.

<table id="companies-index-table" class="table table-responsive-sm table-striped">

                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Created at</th>
                                <th>Updated at</th>
                                <th>Count</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($companies as $company)
                                <tr>
                                    <td>{{ $company->id }}</td>
                                    <td>{{ $company->name }}</td>
                                    <td>{{ $company->created_at }}</td>
                                    <td>{{ $company->updated_at }}</td>
                                    <td>{{ $company->count }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

Мой сценарий: -

<script>
        $(document).ready(function() {
            $('#companies-index-table').DataTable({
                serverSide: true,
                processing: true,
                responsive: true,
                    ajax: "{{ route('admincompanies.datatables') }}",
                columns: [
                    { name: 'id' },
                    { name: 'name' },
                    { name: 'created_at' },
                    { name: 'updated_at' },     <-- I was missing this line so my columns didn't match the thead section.
                    { name: 'count', orderable: false },
                ],
            });
        });
    </script>

Ответ 10

У меня была динамически сгенерированная, но плохо сформированная таблица с опечаткой. Я скопировал <td> внутри другого <td> по ошибке. Количество моих столбцов совпадает. У меня были теги <thead> и <tbody>. Все совпало, за исключением этой маленькой ошибки, которую я некоторое время не замечал, потому что в моей колонке было много ссылок и тегов изображений.

Ответ 11

Я столкнулся с той же проблемой, но я создал таблицу Динамически. В моем случае в моей таблице отсутствовали теги <thead> и <tbody>.

вот мой фрагмент кода, если он помог кому-то

   //table string
   var strDiv = '<table id="tbl" class="striped center responsive-table">';

   //add headers
   var strTable = ' <thead><tr id="tableHeader"><th>Customer Name</th><th>Customer Designation</th><th>Customer Email</th><th>Customer Organization</th><th>Customer Department</th><th>Customer ContactNo</th><th>Customer Mobile</th><th>Cluster Name</th><th>Product Name</th><th> Installed Version</th><th>Requirements</th><th>Challenges</th><th>Future Expansion</th><th>Comments</th></tr> </thead> <tbody>';


  //add data
  $.each(data, function (key, GetCustomerFeedbackBE) {
                            strTable = strTable + '<tr><td>' + GetCustomerFeedbackBE.StrCustName + '</td><td>' + GetCustomerFeedbackBE.StrCustDesignation + '</td><td>' + GetCustomerFeedbackBE.StrCustEmail + '</td><td>' + GetCustomerFeedbackBE.StrCustOrganization + '</td><td>' + GetCustomerFeedbackBE.StrCustDepartment + '</td><td>' + GetCustomerFeedbackBE.StrCustContactNo + '</td><td>' + GetCustomerFeedbackBE.StrCustMobile + '</td><td>' + GetCustomerFeedbackBE.StrClusterName + '</td><td>' + GetCustomerFeedbackBE.StrProductName + '</td><td>' + GetCustomerFeedbackBE.StrInstalledVersion + '</td><td>' + GetCustomerFeedbackBE.StrRequirements + '</td><td>' + GetCustomerFeedbackBE.StrChallenges + '</td><td>' + GetCustomerFeedbackBE.StrFutureExpansion + '</td><td>' + GetCustomerFeedbackBE.StrComments + '</td></tr>';
                        });

//add end of tbody
 strTable = strTable + '</tbody></table>';

//insert table into a div                 
   $('#divCFB_D').html(strDiv);
   $('#tbl').html(strTable);


    //finally add export buttons 
   $('#tbl').DataTable({
                            dom: 'Bfrtip',
                            buttons: [
                                'copy', 'csv', 'excel', 'pdf', 'print'
                            ]
                        });

Ответ 12

В моем случае и с использованием ASP.NET GridView, UpdatePanel и с DropDownList (с выбранным плагином, где я reset значение равно нулю с использованием строки Javascript),. Я получил эту ошибку и все пробовал без надежды на несколько дней. Проблема заключалась в том, что код моего выпадающего кода позади был следующим, и когда я дважды выбираю значение, чтобы применить его действие к выбранным строкам сетки, я получаю эту ошибку. Я думал, что в течение нескольких дней это проблема Javascript (опять же, в моем случае), и, наконец, исправление давало нуль для значения drowpdown с процессом обновления:

  private void ddlTasks_SelectedIndexChanged(object sender, System.EventArgs e)
  {
     if (ddlTasks.SelectedValue != 0) {
        ChangeStatus(ddlTasks.SelectedValue);
        ddlTasks.SelectedValue = "0"; //// **This fixed my issue**
     }

     dvItemsGrid.DataSource = CreateDatasource();
     dvItemsGrid.DataBind();
     dvItemsGrid.UseAccessibleHeader = true;
     dvItemsGrid.HeaderRow.TableSection = TableRowSection.TableHeader;

  }

Это была моя ошибка:

     $('#<%= DropDownList.ClientID%>').val('0').trigger("chosen:updated").chosen();

Ответ 13

В дополнение к несогласованности и числам, это может привести к отсутствию элемента внутри столбцов столбцов данных. Исправление, которое фиксировало мою панель поиска datatables.

Я говорю об этой части;

"columns": [
  null,
  .
  .
  .
  null
           ],

Я боролся с этой ошибкой, пока не был указан, что эта часть имеет один меньше "нуль", чем мой общий подсчет числа адов.

Ответ 14

Вам нужно обернуть свои строки в <thead> для заголовков столбцов и <tbody> для строк. Также убедитесь, что у вас есть соответствие нет. заголовков столбцов <th> как вы делаете для td

Ответ 15

Я могу возникнуть из поля aoColumns. Как заявлено ЗДЕСЬ

aoColumns: если указано, длина этого массива должна быть равна количеству столбцов в исходной таблице HTML. Используйте 'null' там, где вы хотите использовать только значения по умолчанию и автоматически определяемые параметры.

Затем вы должны добавить поля, как в столбцах таблицы

...
aoColumnDefs: [
    null,
    null,
    null,
    { "bSortable": false },
    null,
],
...

Ответ 16

Это сводило меня с ума - как успешно визуализировать DataTable в представлении .NET MVC. Это сработало:

 **@model List<Student>
 @{
    ViewData["Title"] = "Index";
}
 <h2>NEW VIEW Index</h2>
 <table id="example" class="display" style="width:100%">
   <thead>
   <tr>
   <th>ID</th>
    <th>Firstname</th>
    <th>Lastname</th> 
  </tr>
  </thead>
  <tbody>
@foreach (var element in Model)
{
    <tr>
    <td>@Html.DisplayFor(m => element.ID)</td>
    <td>@Html.DisplayFor(m => element.FirstName)</td>
    <td>@Html.DisplayFor(m => element.LastName)</td>
    </tr>

}
</tbody>
</table>**

Скрипт в файле JS:

**$(document).ready(function () {
    $('#example').DataTable();
});**

Ответ 17

Наличие <thead> и <tbody> с одинаковыми номерами <th> и <td> решило мою проблему.

Ответ 18

Я нашел некоторое "решение".

Этот код не работает:

<table>
<thead>
    <tr>
        <th colspan="3">Test</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody>

Но это нормально:

<table>
<thead>
    <tr>
        <th colspan="2">Test</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody>

Я думаю, что проблема в том, что последний TH не может иметь атрибут colspan.