Tablas de datos: no se puede leer la propiedad 'mData' de undefined

Tengo un problema con Datatables. También revisé este enlace que no arrojó ningún resultado. He incluido todos los requisitos previos donde analizo los datos directamente en el DOM. Amablemente ayúdame a solucionar este problema.

Guión

$(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 dataTables requiere una tabla bien formada. Debe contener <thead>y <tbody>etiquetas, de lo contrario arroja este error. Verifique también que todas sus filas, incluida la fila de encabezado, tengan el mismo número de columnas.

Lo siguiente arrojará un error (no <thead>y <tbody>etiquetas)

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

Lo siguiente también arrojará un error (número desigual de columnas)

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

Para más información lea más aquí

Una causa común Cannot read property 'fnSetData' of undefinedes el número de columnas que no coinciden, como en este código erróneo:

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

Si bien el siguiente código con uno <th>por<td> (el número de columnas debe coincidir) funciona:

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

El error también aparece cuando se usa un thead bien formado con un colspan pero sin una segunda fila.

Para una tabla con 7 columnas, lo siguiente no funciona y vemos "No se puede leer la propiedad 'mData' de undefined" en la consola de JavaScript:

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

Mientras esto funciona:

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

Tuve este mismo problema al usar datos DOM en una vista Rails creada a través del generador de andamios. Por defecto, la vista omite <th>elementos para las últimas tres columnas (que contienen enlaces para mostrar, ocultar y destruir registros). Descubrí que si agregué títulos para esas columnas en un <th>elemento dentro de <thead>eso, solucionó el problema.

No puedo decir si este es el mismo problema que tienes ya que no puedo ver tu html. Si no es el mismo problema, puede usar el depurador de Chrome para averiguar en qué columna está produciendo un error haciendo clic en el error en la consola (que lo llevará al código en el que está fallando), luego agregando un condicional punto de ruptura (en col==undefined). Cuando se detiene, puede verificar la variable ipara ver en qué columna se encuentra actualmente, lo que puede ayudarlo a descubrir qué es diferente de esa columna de las otras. ¡Espero que ayude!

Tener <thead>y <tbody>con los mismos números de <th>y <td>resolvió mi problema.

Esto también puede ocurrir si tiene argumentos de tabla para cosas como las 'aoColumns':[..]que no coinciden con el número correcto de columnas. Problemas como este pueden ocurrir comúnmente al copiar el código de pegado de otras páginas para iniciar rápidamente la integración de sus tablas de datos.

Ejemplo:

Esto no funcionará:

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

Pero esto funcionará:

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

Una razón más por la que esto sucede es debido al parámetro de columnas en la inicialización de DataTable.

El número de columnas debe coincidir con los encabezados.

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

Tuve 7 columnas

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

Tienes que eliminar tu colspany el número de th y tddebe coincidir.

Consejos 1:

Consulte este enlace para obtener algunas ideas:

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

Consejos 2:

Verifique que lo siguiente sea correcto:

• Por favor, consulte la Jquery Vesion
• Consulte la versión de su CDN o los archivos .min y css relacionados con la tabla de datos local
• su mesa tiene <thead></thead>y <tbody></tbody>etiquetas
• Su tabla de cabecera columnas de longitud igual como cuerpo columnas de longitud
• El uso de algunas nubes en la style='display:none'misma propiedad se aplica tanto en el encabezado como en el cuerpo.
• las columnas de su tabla no están vacías, use algo como [Nulo, -, NA, Nulo]
• Tu mesa está bien sin <td>, <tr>problemas

en mi caso este error ocurrió si uso la tabla sin encabezado

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

Me enfrenté al mismo error cuando intenté agregar colspan para durar

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

y lo resolvió agregando una columna oculta al final de 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>

La explicación de esto es que, por alguna razón, DataTable no se puede aplicar a la tabla con colspan en el último th, pero se puede aplicar, si colspan se usa en cualquier th medio.

Esta solución es un poco hacky, pero más simple y más corta que cualquier otra solución que encontré.

Espero que eso ayude a alguien.

Un problema ligeramente diferente para mí de las respuestas dadas anteriormente. Para mí, el marcado HTML estaba bien, pero faltaba una de mis columnas en JavaScript y no coincidía con el html.

es decir

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

Mi guión: -

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

Tenía una tabla generada dinámicamente, pero mal formada con un error tipográfico. Copié una <td>etiqueta dentro de otra <td>por error. Mi recuento de columnas coincidió. Tenía <thead>y <tbody>etiquetas. Todo coincidió, excepto por este pequeño error que no noté por un tiempo, porque mi columna tenía muchas etiquetas de enlaces e imágenes.

Encontré el mismo problema pero estaba generando la tabla dinámicamente . En mi caso, mi mesa tenía faltantes <thead>y <tbody>etiquetas.

aquí está mi fragmento de código si ayudó a alguien

   //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'
                            ]
                        });

Además de los inconsistentes y los números, un elemento faltante dentro de la parte de columnas de scripts de tabla de datos también puede causar esto. Corregir eso corrigió mi barra de búsqueda de tablas de datos.

Estoy hablando de esta parte;

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

Luché con este error hasta que me señalaron que esta parte tenía uno menos "nulo" que el total de mi cuenta.

Este me volvió loco: cómo representar una tabla de datos con éxito en una vista .NET MVC. Esto funcionó:

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

Script en archivo JS:

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

En mi caso, y usando ASP.NET GridView, UpdatePanel y con DropDownList (con el complemento Elegido donde restablezco el valor a cero usando una línea Javascript), recibí este error y probé todo sin esperanza durante días. El problema era que el código de mi menú desplegable en el código detrás era el siguiente y cuando selecciono un valor dos veces para aplicar su acción a las filas de cuadrícula seleccionadas, aparece ese error. Durante días pensé que era un problema de Javascript (nuevamente, en mi caso) y finalmente la solución estaba dando cero para el valor de reducción con el proceso de actualización:

  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;

  }

Esto fue mi culpa:

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

Debe ajustar sus filas <thead>para los encabezados de columna y <tbody>para las filas. Asegúrate también de que tienes el no. de encabezados de columna <th>como lo hace para eltd

Puedo estar surgiendo por el campo aoColumns. Como se indica AQUÍ

aoColumns: si se especifica, la longitud de esta matriz debe ser igual al número de columnas en la tabla HTML original. Use 'nulo' donde desee usar solo los valores predeterminados y las opciones detectadas automáticamente.

Luego debe agregar campos como en la tabla Columnas

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

en mi caso, la causa de este error es que tengo 2 tablas que tienen el mismo nombre de identificación con una estructura de tabla diferente, debido a mi hábito de copiar y pegar el código de la tabla. asegúrese de tener una identificación diferente para cada tabla.

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

Encontré alguna "solución".

Este código no funciona:

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

Pero esto está bien:

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

Creo que el problema es que el último TH no puede tener el atributo colspan.