Database: impossibile leggere la proprietà 'mData' di undefined

Ho un problema con Datatables. Ho anche attraversato questo link che non ha prodotto risultati. Ho incluso tutti i prerequisiti in cui analizzo i dati direttamente nel DOM. Aiutami gentilmente a risolvere questo problema.

copione

$(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 richiede una tabella ben formata. Deve contenere <thead>e <tbody>tag, altrimenti genera questo errore. Verifica inoltre che tutte le righe, inclusa la riga di intestazione, abbiano lo stesso numero di colonne.

Quanto segue genererà un errore (no <thead>e <tbody>tag)

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

Quanto segue genererà anche un errore (numero diseguale di colonne)

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

Per maggiori informazioni leggi di più qui

Una causa comune Cannot read property 'fnSetData' of undefinedè il numero di colonne non corrispondente, come in questo codice errato:

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

Mentre il seguente codice con uno <th>per<td> (il numero di colonne deve corrispondere) funziona:

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

L'errore appare anche quando si utilizza un thead ben formato con un colspan ma senza una seconda riga.

Per una tabella con 7 colonne, il seguente non funziona e vediamo "Impossibile leggere la proprietà 'mData' di undefined" nella console javascript:

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

Mentre funziona:

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

Ho avuto lo stesso problema utilizzando i dati DOM in una vista Rails creata tramite il generatore di scaffold. Per impostazione predefinita, la vista omette gli <th>elementi per le ultime tre colonne (che contengono collegamenti per mostrare, nascondere e distruggere i record). Ho scoperto che se avessi aggiunto titoli per quelle colonne in un <th>elemento all'interno del <thead>quale risolveva il problema.

Non posso dire se questo è lo stesso problema che stai riscontrando dal momento che non riesco a vedere il tuo HTML. Se non è lo stesso problema, puoi utilizzare il debugger di Chrome per capire su quale colonna si sta sbagliando facendo clic sull'errore nella console (che ti porterà al codice su cui non funziona), quindi aggiungendo un condizionale punto di interruzione (at col==undefined). Quando si interrompe puoi controllare la variabile iper vedere su quale colonna si trova attualmente che può aiutarti a capire cosa c'è di diverso in quella colonna dalle altre. Spero che aiuti!

Avere <thead>e <tbody>con lo stesso numero <th>e <td>risolto il mio problema.

Questo può accadere anche se hai argomenti di tabella per cose come quelle 'aoColumns':[..]che non corrispondono al numero corretto di colonne. Problemi come questo possono verificarsi di solito quando si copia il codice incollato da altre pagine per avviare rapidamente l'integrazione dei database.

Esempio:

Questo non funzionerà:

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

Ma questo funzionerà:

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

Un altro motivo per cui ciò accade è a causa del parametro colonne nell'inizializzazione DataTable.

Il numero di colonne deve corrispondere alle intestazioni

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

Ho avuto 7 colonne

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

Devi rimuovere il tuo colspane il numero di th e tddeve corrispondere.

Suggerimenti 1:

Fare riferimento a questo link per ottenere alcune idee:

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

Suggerimenti 2:

Verificare che quanto segue sia corretto:

• Si prega di controllare Jquery Vesion
• Controlla il versiion della tua CDN o dei tuoi file .min & css relativi ai dati locali
• il tuo tavolo ha <thead></thead>e <tbody></tbody>tag
• Il vostro tavolo Header colonne di lunghezza stessa come Corpo Colonne Lunghezza
• L'uso di alcuni cloumns nello style='display:none'stesso modo si applica sia in Intestazione che in corpo.
• le colonne della tua tabella non sono vuote, usa qualcosa come [Null, -, NA, Nil]
• Il tuo tavolo è ben fatto senza <td>, <tr>problemi

nel mio caso questo errore si è verificato se utilizzo la tabella senza intestazione

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

Ho riscontrato lo stesso errore, quando ho provato ad aggiungere colspan all'ultimo

<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 risolto aggiungendo la colonna nascosta alla fine di 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>

Spiegazione di ciò è che per qualche motivo DataTable non può essere applicato alla tabella con colspan nell'ultimo th, ma può essere applicato, se colspan è usato in qualsiasi mezzo.

Questa soluzione è un po 'confusa, ma più semplice e più breve di qualsiasi altra soluzione che ho trovato.

Spero che possa aiutare qualcuno.

Problema leggermente diverso per me dalle risposte fornite sopra. Per me, il markup HTML andava bene, ma mancava una delle mie colonne nel javascript e non corrispondeva al codice HTML.

vale a dire

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

La mia sceneggiatura: -

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

Avevo una tabella generata dinamicamente, ma mal formata con un refuso. Ho copiato un <td>tag all'interno di un altro <td>per errore. Il mio conteggio delle colonne corrisponde. Ho avuto <thead>e <tbody>tag. Tutto corrispondeva, tranne per questo piccolo errore che non ho notato per un po ', perché la mia colonna aveva un sacco di link e tag immagine in esso.

Avevo riscontrato lo stesso problema ma stavo generando la tabella in modo dinamico . Nel mio caso, il mio tavolo aveva mancante <thead>e <tbody>tag.

ecco il mio frammento di codice se ha aiutato qualcuno

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

Oltre a incoerenti e numeri, anche un elemento mancante nella parte delle colonne degli script datatable può causare questo. La correzione ha corretto la barra di ricerca dei miei dati.

Sto parlando di questa parte;

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

Ho lottato con questo errore fino a quando non mi è stato indicato che questa parte aveva uno "null" in meno rispetto al mio conteggio totale di thead.

Questo mi ha fatto impazzire: come rendere correttamente una DataTable in una vista MVC .NET. Questo ha funzionato:

 **@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 nel file JS:

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

Nel mio caso, e usando ASP.NET GridView, UpdatePanel e DropDownList (con il plugin Chosen in cui ho resettato il valore a zero usando una linea Javascript), ho ricevuto questo errore e ho provato tutto senza alcuna speranza per giorni. Il problema era che il codice del mio menu a discesa nel codice dietro era il seguente e quando seleziono un valore due volte per applicare la sua azione alle righe della griglia selezionate ottengo quell'errore. Per giorni ho pensato che fosse un problema Javascript (di nuovo, nel mio caso) e alla fine la correzione stava dando zero per il valore di drowpdown con il processo di aggiornamento:

  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;

  }

Questa è stata colpa mia:

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

Devi racchiudere le tue righe <thead>per le intestazioni di colonna e <tbody>per le righe. Assicurati anche di avere il numero corrispondente. delle intestazioni di colonna <th>come fai pertd

Potrei sorgere dal campo aoColumns. Come indicato QUI

aoColumns: se specificato, la lunghezza di questo array deve essere uguale al numero di colonne nella tabella HTML originale. Utilizzare 'null' dove si desidera utilizzare solo i valori predefiniti e le opzioni rilevate automaticamente.

Quindi devi aggiungere campi come nelle colonne della tabella

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

nel mio caso la causa di questo errore è che ho 2 tabelle che hanno lo stesso nome ID con diversa struttura della tabella, a causa della mia abitudine di copiare e incollare il codice della tabella. assicurati di avere un ID diverso per ogni tabella.

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

Ho trovato qualche "soluzione".

Questo codice non funziona:

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

Ma questo è ok:

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

Penso che il problema sia che l'ultimo TH non può avere l'attributo colspan.