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




jquery datatable columns example (13)

Mais uma razão pela qual isso acontece é por causa do parâmetro de colunas na inicialização DataTable.

O número de colunas tem que combinar com 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>

Eu tenho um problema com as Datatables . Eu também passei por este link que não me rendeu nenhum resultado. Eu incluí todos os pré-requisitos onde estou analisando dados diretamente no DOM. Por favor, ajude-me a corrigir este 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]
    }],
  });
});

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

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

Dicas 1:

Consulte este link para obter algumas ideias:

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

Dicas 2:

Verifique o seguinte está correto:

  • Por favor, verifique o Jquery Vesion
  • Por favor, verifique a versão do seu CDN ou os seus arquivos .min & css relacionados a dados locais.
  • sua tabela tem as tags <thead></thead> e <tbody></tbody>
  • Sua tabela Colunas do cabeçalho Comprimento igual ao comprimento das colunas do corpo
  • Você usa alguns cloumns em style='display:none' , da mesma forma que você aplica em ambos, Header & body.
  • as colunas da sua tabela não estão vazias, use algo como [Null, -, NA, Nil]
  • Sua tabela é bem uma com problema <td>, <tr>

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 faltando e não correspondia ao html.

ou seja

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

Uma causa comum para Cannot read property 'fnSetData' of undefined é o número de colunas não correspondido, 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> per <td> (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 quando se usa um thead 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 undefined" no console do 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>

Você tem que remover seu colspan e o número de th e td precisa ser igual.


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


Você precisa agrupar suas linhas em <thead> para os cabeçalhos das colunas e <tbody> para as linhas. Também verifique se você tem correspondência não. de cabeçalhos de coluna <th> como você faz para o td


Eu tinha uma tabela gerada dinamicamente, mas mal formada com um erro de digitação. Eu copiei uma tag <td> dentro de outro <td> por engano. Minha contagem de colunas foi correspondida. Eu tinha tags <thead> e <tbody> . Tudo combinava, exceto por esse pequeno erro que não percebi por um tempo, porque minha coluna tinha muitas tags de link e de imagem.


Além de inconsistentes e números, um item ausente dentro da parte de colunas de scripts de dados pode causar isso também. Corrigindo essa barra fixa de pesquisa de dados.

Estou falando sobre essa parte;

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

Eu lutei com esse erro até que fui apontado que essa parte tinha menos um "nulo" do que minha contagem total.


Eu tinha encontrado o mesmo problema, mas eu estava gerando tabela dinamicamente . No meu caso, minha tabela tinha as tags <thead> e <tbody> ausentes.

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

Eu tive esse mesmo problema usando dados DOM em uma visão Rails criada através do gerador de scaffold. Por padrão, a exibição omite os <th> elementos das três últimas colunas (que contêm links para mostrar, ocultar e destruir registros). Descobri que, se eu adicionei títulos para essas colunas em um elemento <th> dentro do <thead> ele corrigiu o problema.

Eu não posso dizer se este é o mesmo problema que você está tendo desde que eu não posso ver o seu html. Se não for o mesmo problema, você pode usar o depurador do chrome para descobrir em qual coluna ele está errando clicando no erro no console (que o levará ao código em que ele está falhando) e, em seguida, adicionando um condicional ponto de interrupção (em col==undefined ). Quando ele para, você pode verificar a variável i para ver em qual coluna ela está atualmente, o que pode ajudá-lo a descobrir o que há de diferente naquela coluna em relação às outras. Espero que ajude!


No meu caso, e usando ASP.NET GridView, UpdatePanel e com DropDownList (com o plugin Chosen onde eu redefinir o valor para zero usando uma linha de 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 eu seleciono um valor duas vezes para aplicar sua ação às linhas de grade selecionadas, recebo esse erro. Eu pensei durante dias que é um problema de Javascript (novamente, no meu caso) e, finalmente, a correção estava dando zero para o valor 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;

  }

Isso foi minha culpa:

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




datatables