Datatables: Não é possível ler a propriedade 'mData' de undefined

Eu tenho um problema com Datatables. Eu também passei por esse link que não produziu nenhum resultado. Incluí todos os pré-requisitos em que estou analisando dados diretamente no DOM. Por favor, ajude-me a corrigir esse problema.

Roteiro

$(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 requer uma mesa bem formada. Ele deve conter tags <thead>e <tbody>, caso contrário, gera esse erro. Verifique também se todas as suas linhas, incluindo a linha do cabeçalho, têm o mesmo número de colunas.

O seguinte irá gerar erro (não <thead>e <tbody>tags)

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

O seguinte também gerará um erro (número desigual de colunas)

<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 mais informações, leia mais aqui

Uma causa comum de Cannot read property 'fnSetData' of undefinedé o número incompatível de colunas, como neste código incorreto:

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

Enquanto o seguinte código com um <th>por<td> (o número de colunas deve corresponder) 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>

O erro também aparece ao usar um cabeçote bem formado com um colspan, mas sem uma segunda linha.

Para uma tabela com 7 colunas, o seguinte não funciona e vemos "Não é possível ler a propriedade 'mData' de indefinida" no console javascript:

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

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

Eu tive esse mesmo problema ao usar dados DOM em uma exibição do Rails criada por meio do gerador de andaimes. Por padrão, a visualização omite <th>elementos das três últimas colunas (que contêm links para mostrar, ocultar e destruir registros). Eu descobri que se eu adicionasse títulos para essas colunas em um <th>elemento dentro do <thead>que ele corrigisse o problema.

Não posso dizer se esse é o mesmo problema que você está tendo, pois não consigo ver seu html. Se não for o mesmo problema, você pode usar o depurador chrome para descobrir em qual coluna está incorreto clicando no erro no console (que o levará ao código em que está falhando) e, em seguida, adicionando uma condição ponto de interrupção (em col==undefined). Quando ele pára, você pode verificar a variável ipara ver em qual coluna ela está atualmente e que pode ajudá-lo a descobrir o que há de diferente nessa coluna em relação às outras. Espero que ajude!

Tendo <thead>e <tbody>com os mesmos números <th>e <td>resolvido o meu problema.

Isso também pode ocorrer se você tiver argumentos de tabela para coisas como as 'aoColumns':[..]que não correspondem ao número correto de colunas. Problemas como esse geralmente podem ocorrer ao copiar o código de colar de outras páginas para iniciar rapidamente sua integração com as tabelas de dados.

Exemplo:

Isso não vai 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>

Mas isso vai 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>

Mais um motivo para isso acontecer é por causa do parâmetro de colunas na inicialização do DataTable.

O número de colunas deve corresponder aos cabeçalhos

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

Eu tinha 7 colunas

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

Você tem que remover o seu colspane o número de th e tdnecessidades para corresponder.

Dicas 1:

Consulte este link para obter algumas idéias:

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

Dicas 2:

Verifique se o seguinte está correto:

• Por favor, verifique o Jquery Vesion
• Verifique a versão do seu CDN ou dos arquivos .min e css relacionados a dados locais.
• sua mesa tem <thead></thead>& <tbody></tbody>tags
• Sua tabela Cabeçalho Colunas Comprimento igual ao Corpo Colunas Comprimento
• Seu uso de alguns cloumns da style='display:none'mesma propriedade aplica-se a ambos, cabeçalho e corpo.
• suas colunas da tabela não estiverem vazias, use algo como [Null, -, NA, Nil]
• Sua mesa está bem sem <td>, <tr>problemas

no meu caso, esse erro ocorreu se eu usar tabela sem cabeçalho

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

Eu enfrentei o mesmo erro, quando tentei adicionar colspan ao último dia

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

e resolveu adicionando uma coluna oculta ao 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>

A explicação para isso é que, por algum motivo, o DataTable não pode ser aplicado à tabela com colspan no último dia, mas pode ser aplicado, se o colspan for usado em qualquer meio.

Esta solução é um pouco hacky, mas mais simples e mais curta do que qualquer outra solução que encontrei.

Espero que ajude alguém.

Problema ligeiramente diferente para mim das respostas dadas acima. Para mim, a marcação HTML estava boa, mas uma das minhas colunas no javascript estava ausente e não correspondia ao html.

ie

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

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

Eu tinha uma tabela gerada dinamicamente, mas mal formada, com um erro de digitação. Copiei uma <td>etiqueta dentro de outra <td>por engano. Minha contagem de colunas corresponde. Eu tinha <thead>e <tbody>tags. Tudo correspondeu, exceto por este pequeno erro que eu não notei por um tempo, porque minha coluna tinha muitas tags de link e imagem.

Eu havia encontrado o mesmo problema, mas estava gerando tabela dinamicamente . No meu caso, minha mesa estava faltando <thead>e <tbody>tags.

aqui está o meu trecho de código, se ajudou alguém

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

Além de inconsistentes e números, um item ausente nas partes das colunas dos scripts de dados também pode causar isso. Corrigir isso corrigia minha barra de pesquisa de tabelas de dados.

Eu estou falando sobre essa parte;

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

Eu lutei com esse erro até me indicar que essa parte tinha menos um "nulo" do que minha contagem total de threads.

Este me deixou louco - como renderizar uma DataTable com êxito em uma exibição do .NET MVC. Isso funcionou:

 **@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 no arquivo JS:

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

No meu caso, e usando o ASP.NET GridView, UpdatePanel e com DropDownList (com o plugin Chosen, onde redefini o valor para zero usando uma linha Javascript), recebi esse erro e tentei de tudo sem esperança por dias. O problema era que o código da minha lista suspensa no código por trás era o seguinte e quando seleciono um valor duas vezes para aplicar sua ação às linhas de grade selecionadas, recebo esse erro. Pensei por dias que é um problema de Javascript (novamente, no meu caso) e, finalmente, a correção estava dando zero para o valor de drowpdown com o processo de atualização:

  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;

  }

A culpa foi minha:

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

Você precisa agrupar suas linhas nos <thead>cabeçalhos das colunas e <tbody>nas linhas. Verifique também se você possui o número correspondente. de cabeçalhos de coluna <th>como você faz para otd

Eu posso estar surgindo pelo campo aoColumns. Como indicado AQUI

aoColumns: Se especificado, o comprimento dessa matriz deve ser igual ao número de colunas na tabela HTML original. Use 'null' onde você deseja usar apenas os valores padrão e as opções detectadas automaticamente.

Então você tem que adicionar campos como na tabela Columns

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

no meu caso, a causa desse erro é que eu tenho 2 tabelas que têm o mesmo nome de ID com estrutura de tabela diferente, devido ao meu hábito de copiar e colar o código da tabela. verifique se você tem um ID diferente para cada tabela.

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

Eu encontrei alguma "solução".

Este código não funciona:

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

Mas está tudo bem:

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

Eu acho que o problema é que o último TH não pode ter o atributo colspan.