Дані: Неможливо прочитати властивість 'mData' невизначеного

У мене проблема 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]
    }],
  });
});

Дані таблиць FYI вимагають чітко сформованої таблиці. Він повинен містити <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>

Більше інформації читайте тут

Загальною причиною 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>

Помилка також з’являється при використанні добре сформованої теди з кольшаном, але без другого ряду.

Для таблиці з 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>

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

Я не можу сказати, чи це та сама проблема, що і у вас, оскільки я не бачу ваш HTML. Якщо це не та сама проблема, ви можете скористатися хромованим налагоджувачем, щоб з’ясувати, у якому стовпчику вона помиляється, натиснувши на помилку в консолі (що приведе вас до коду, на який виходить з ладу), а потім додайте умовний точка розриву (у col==undefined). Коли він зупиняється, ви можете перевірити змінну, iщоб побачити, на якому стовпчику вона зараз знаходиться, що допоможе вам зрозуміти, чим відрізняється цей стовпець від інших. Сподіваюся, що це допомагає!

Маючи <thead>і <tbody>з однаковою кількістю <th>і <td>вирішив мою проблему.

Це також може статися, якщо у вас є аргументи таблиці для таких речей '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>

Ще одна причина, чому це відбувається - це параметр стовпців в ініціалізації 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>

Ви повинні вилучити свою colspanкількість th та кількість, що tdмає відповідати.

Поради 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>теги
• Довжина стовпців заголовка таблиці така ж, як і довжина стовпців корпусу
• Використання деяких стовпців у style='display:none' тій самій застосовується як у заголовку, так і в тілі.
• стовпці таблиці не порожні, використовуйте щось на зразок [Null, -, NA, Nil]
• Ваша таблиця цілком одна із <td>, <tr>випусків

у моєму випадку ця помилка сталася, якщо я використовую таблицю без заголовка

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

Я зіткнувся з тією ж помилкою, коли намагався додати colspan до останнього

<table>
  <thead>
    <tr>    
      <th>&nbsp;</th> <!-- column 1 -->
      <th colspan="2">&nbsp;</th> <!-- column 2&3 -->
    </tr>
  </thead>

  <tbody>
    <tr>
      <tr>&nbsp;</tr>
      <tr>&nbsp;</tr>
      <tr>&nbsp;</tr>
    </tr>
  </tbody>
</table>

і вирішили це, додавши прихований стовпець до кінця tr

<thead>
  <tr>    
    <th>&nbsp;</th> <!-- column 1 -->
    <th colspan="2">&nbsp;</th> <!-- column 2&3 -->

    <!-- hidden column 4 for proper DataTable applying -->
    <th style="display: none"></th> 
  </tr>
</thead>

<tbody>
  <tr>
    <tr>&nbsp;</tr>
    <tr>&nbsp;</tr>
    <tr>&nbsp;</tr>

    <!-- hidden column 4 for proper DataTable applying -->
    <tr style="display: none"></tr>
  </tr>
</tbody>

Поясненням цього є те, що з якихось причин DataTable не може бути застосований до таблиці з colspan в останньому, але може бути застосований, якщо colspan використовується в будь-якій середній.

Це рішення трохи химерне, але простіше і коротше, ніж будь-яке інше рішення, яке я знайшов.

Я сподіваюся, що хтось допоможе.

Трохи інша проблема для мене від наведених вище відповідей. Для мене розмітка 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>

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

Я стикався з тією ж проблемою, але я генерував таблицю Динамічно . У моєму випадку мій стіл бракував <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'
                            ]
                        });

На додаток до непослідовних чисел, це також може призвести до відсутності елемента всередині стовпців скриптів, що можна передати дані. Виправивши виправлену панель пошуку моїх таблиць даних.

Я говорю про цю частину;

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

Я боровся з цією помилкою, поки мені не вказали, що ця частина має одну меншу "нуль", ніж мій загальний підрахунок теда.

Цей зводив мене з розуму - як успішно відтворити таблицю даних у поданні .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();
});**

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

  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();

Потрібно загорнути свої рядки <thead>для заголовків стовпців та <tbody>рядків. Також переконайтеся, що у вас немає відповідних номерів. заголовків стовпців, <th>як і дляtd

Можливо, виникає поле aoColumns. Як сказано ТУТ

aoColumns: Якщо вказано, то довжина цього масиву повинна дорівнювати кількості стовпців у вихідній таблиці HTML. Використовуйте "null" там, де ви хочете використовувати лише значення за замовчуванням та автоматично виявлені параметри.

Потім потрібно додати поля, як у стовпцях таблиці

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

в моєму випадку причиною цієї помилки є те, що у мене є 2 таблиці, які мають однакове ідентифікаційне ім’я з різною структурою таблиці, через мою звичку копіювати і вставляти код таблиці. будь ласка, переконайтеся, що у вас є різні ідентифікатори для кожної таблиці.

<table id="tabel_data">
    <thead>
        <tr>
            <th>heading 1</th>
            <th>heading 2</th>
            <th>heading 3</th>
            <th>heading 4</th>
            <th>heading 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data-1</td>
            <td>data-2</td>
            <td>data-3</td>
            <td>data-4</td>
            <td>data-5</td>
        </tr>
    </tbody>
</table>

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

Я знайшов якесь «рішення».

Цей код не працює:

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