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

307

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]
    }],
  });
});
Thriveni
fonte
4
você pode mostrar html da sua tabela?
Ehsan Sajjad
desculpe por não postar html .. obrigado pela sua preocupação .. eu corrigi o meu problema :).
Thriveni 16/09/14
10
O erro "Não é possível ler a propriedade 'mData' de indefinido" também aparece ao usar um cabeçalho bem formado com um colspan, mas sem uma segunda linha para obter um th por td
PaulH
execute comentando primeiro a função .dataTable () e, em seguida, veja a tabela; você encontrará o problema em mais casos
Rajdeep
thead ou coluna título da tabela deve estar faltando na mesa, então script não é capaz de achar que, por favor, verifique a sua posição em thead ou qualquer nome de coluna
Rahul Jain

Respostas:

660

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

Moses Machua
fonte
11
Havia extra <td> no meu <tbody> quando o removi woked !! muito obrigado
#
3
@SarowerJahan feliz que eu poderia ajudar.
Moses Machua 19/04
3
Passei um dia inteiro nessa questão. O problema? Eu tinha 2 th, mas 3 td. Me chutando em uma questão tão boba! Muito obrigado.
IfElseTryCatch
1
@foxontherock, por convenção. O que você está descrevendo é uma configuração personalizada, que eu saiba, mas se você não fornecer uma configuração personalizada, em seguida, o padrão é convenção que minha resposta endereços
Moses Machua
1
Você, meu amigo, é um míssil de olhos de aço! Eu tinha uma falta <th> :-) :-)
Andy
80

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>
PaulH
fonte
5
Achou sua resposta útil. Minha marcação estava faltando trpara incluir todos os thelementos. Basta deixar aqui para o caso de alguém achar isso útil!
precisa
Esta resposta também me levou à minha solução. Faltava uma thcoluna na minha thead, que estava causando o erro. A resposta de Nathan Hanna também parece indicar esse problema.
Paul Richter
isso me ajuda a ver que tenho uma falta thno meu theadtambém!
Demi Magus
Mesmo quatro anos de colspaninterpretação ainda é um problema. Eu tive que colocar em branco the não colspanpara me livrar dos erros. Mas que simples adição para obter essa funcionalidade. BTW: Rails 5.1.5, Bootstrap 4.0.0. Acabei de adicionar as folhas de estilo e CDNs de script e $(document).ready…à página.
Greg
@ Greg Desculpe, eu não entendo.
23918 PaulH
43

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!

erro mData de depuração

Nathan Hanna
fonte
1
Este foi o único método que me ajudou a resolver meu problema. Obrigado!
Mike Crowe
Não temos certeza de que você já mencionou isso, mas podemos "observar" as variáveis ​​na coluna da direita e descobrir qual tabela está relacionada. Para o meu caso, é a renderização padrão da tabela Asp.Net, que não é padronizada quando a tabela está vazia. Obrigado pela dica!
Hoàng Long
Obrigado ... Nathan pelas etapas de depuração. Isso me ajudou.
Sachin Gaikwad
1
Para mim, o problema é resolvido adicionando o elemento thead e tbody.
26517 neolei
Eu tenho a mesma configuração do Rails, mas nomeei as três últimas colunas "Detalhes" com um colspan="3"mas obtive erros (foi assim que acabei nesta página). Eu brinquei um pouco, mas finalmente desisti e criei três thelementos e com o primeiro "Detalhes" e deixei os dois últimos em branco. A brincadeira sugeriu que o dataTables tem problemas com o colspan como o último da série. A correção do OP é ímpar, pois o número de colunas não se soma. Eu não tinha nenhuma condição na mesa, como orderou sortable. Eu os adicionei depois que funcionei.
Greg
31

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

Masoud Darvishian
fonte
1
Obrigado, esse foi o meu problema também. Sua resposta foi útil, senhor.
Fmquaglia 13/06/19
27

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>
DrewT
fonte
1
Exatamente o meu problema, apenas com a propriedade 'columns'.
Nick Poulos
@NickPoulos Sim, isso pode acontecer em qualquer parâmetro de configuração se referenciar um índice que não existe na tabela.
DrewT
12

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>
Siddharth
fonte
9

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

Francisco Balam
fonte
8

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
venkatskpi
fonte
<thead> </thead> e <tbody> </tbody> resolvem meu problema. Obrigado.
MrTex 25/03
6

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

              <thead>
                   <tr>
                       <th>example</th>
                  </tr>
              </thead>
Asad
fonte
1
Obrigado - posso confirmar que isso também corrigiu meu erro desse tipo.
Rog
5

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.

renkse
fonte
3

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>
Paul Wright
fonte
3

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.

Peter Szalay
fonte
2

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'
                            ]
                        });
Hitesh Sahu
fonte
2

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.

Ege Bayrak
fonte
2

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();
});**
smac2020
fonte
1

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();
hsobhy
fonte
0

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

William
fonte
0

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,
],
...
Shah Muhammad Talha
fonte
0

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>

Baim Wrong
fonte
-3

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.

kluvi
fonte