jquery - read - Datos: No se puede leer la propiedad ''mData'' de undefined

uncaught typeerror cannot read property ''_ adata of undefined

Question

Tengo un problema con Datatables . También pasé por este enlace que no me dio ningún resultado. He incluido todos los requisitos previos en los que estoy analizando los datos directamente en el DOM. Por favor 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]
    }],
  });
});

Answer 1

Además de incoherentes y números, un elemento faltante dentro de la parte de columnas de scripts de datos puede causar esto también. Corrigiendo eso arreglé mi barra de búsqueda de datos.

Estoy hablando de esta parte;

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

Luché con este error hasta que me señalaron que esta parte tenía una "nula" menos que mi total de cuentas.

Answer 2

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.

Answer 3

Esto también puede ocurrir si tiene argumentos de tabla para cosas como ''aoColumns'':[..] que no coinciden con el número correcto de columnas. Comúnmente, este tipo de problemas pueden ocurrir al copiar y pegar código de otras páginas para iniciar rápidamente su integración 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>

Answer 4

FYI dataTables requiere una tabla bien formada. Debe contener las <thead> y <tbody> , de lo contrario, arroja este error. También verifique que todas sus filas, incluida la fila de encabezado, tengan el mismo número de columnas.

Lo siguiente arrojará un error (sin <thead> y <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>

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 leer más aquí.

Answer 5

Me había encontrado el mismo problema pero estaba generando la tabla dinámicamente . En mi caso, a mi tabla le faltaban las <thead> y <tbody> .

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

Answer 6

Tienes que eliminar tu colspan y la cantidad de th y td deben coincidir.

Answer 7

Tuve este mismo problema al usar los datos DOM en una vista de Rails creada a través del generador de andamios. Por defecto, la vista omite los elementos <th> para las últimas tres columnas (que contienen enlaces para mostrar, ocultar y destruir registros). Descubrí que si agregaba títulos para esas columnas en un elemento <th> dentro de <thead> , solucionaba 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á cometiendo 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 interrupción (en col==undefined ). Cuando se detiene, puede verificar la variable i para ver en qué columna se encuentra actualmente, lo que puede ayudarlo a descubrir qué es diferente acerca de esa columna de las otras. ¡Espero que ayude!

Answer 8

Un problema ligeramente diferente para mí de las respuestas dadas anteriormente. Para mí, el formato HTML estaba bien, pero faltaba una de mis columnas en el 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 Script: -

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

Answer 9

Una causa común para Cannot read property ''fnSetData'' of undefined es el número de columnas no coincidentes, 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>

Mientras que el siguiente código con un <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 utiliza 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 indefinido" 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>

Answer 10

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 tiene que coincidir con los encabezados.

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

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

Answer 11

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

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

Answer 12

<thead> ajustar sus filas en <thead> para los encabezados de columna y <tbody> para las filas. También asegúrese de que tiene emparejamiento no. de encabezados de columna <th> como lo hace para el td

Answer 13

En mi caso, y al usar ASP.NET GridView, UpdatePanel y con DropDownList (con el complemento elegido en el que restablecí el valor a cero utilizando una línea de Javascript), obtuve este error y probé todo sin esperanza durante días. El problema fue que el código de mi menú desplegable en el código que estaba detrás era el siguiente y cuando selecciono un valor dos veces para aplicar su acción a las filas de la cuadrícula seleccionada, obtengo ese error. Pensé que durante días era un problema de Javascript (una vez más, en mi caso) y, finalmente, la solución daba cero para el valor drowpdown 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();