Dane: Nie można odczytać właściwości „mData” niezdefiniowanej

Mam problem z Datatables. Przejrzałem również ten link, który nie przyniósł żadnych rezultatów. Uwzględniłem wszystkie wymagania wstępne, podczas których analizuję dane bezpośrednio w DOM. Uprzejmie pomóż mi rozwiązać ten problem.

Scenariusz

$(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 wymaga dobrze uformowany tabeli. Musi zawierać <thead>i <tbody>tagi, w przeciwnym razie zgłasza ten błąd. Sprawdź także, czy wszystkie wiersze, w tym wiersz nagłówka, mają tę samą liczbę kolumn.

Następujące wyrzuci błąd (nie <thead>i <tbody>tagi)

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

Następujące spowoduje również zgłoszenie błędu (nierówna liczba kolumn)

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

Aby uzyskać więcej informacji, przeczytaj więcej tutaj

Częstą przyczyną Cannot read property 'fnSetData' of undefinedjest niedopasowana liczba kolumn, jak w tym błędnym kodzie:

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

Chociaż działa następujący kod z jednym <th>na<td> (liczba kolumn musi pasować):

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

Błąd pojawia się również przy korzystaniu z dobrze uformowanej thead z colspan, ale bez drugiego rzędu.

W przypadku tabeli z 7 kolumnami poniższe polecenie nie działa i widzimy „Nie można odczytać właściwości„ mData ”niezdefiniowanej” w konsoli javascript:

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

Podczas gdy to działa:

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

Miałem ten sam problem przy użyciu danych DOM w widoku Rails utworzonym za pomocą generatora rusztowań. Domyślnie widok pomija <th>elementy trzech ostatnich kolumn (które zawierają łącza do pokazywania, ukrywania i niszczenia rekordów). Odkryłem, że jeśli dodam tytuły dla tych kolumn w <th>elemencie w obrębie <thead>, to naprawi to problem.

Nie mogę powiedzieć, czy masz ten sam problem, ponieważ nie widzę twojego html. Jeśli nie jest to ten sam problem, możesz użyć debugera Chrome, aby dowiedzieć się, w której kolumnie jest on błędny, klikając błąd w konsoli (który przeniesie Cię do kodu, który nie działa), a następnie dodając warunkową punkt przerwania (at col==undefined). Kiedy się zatrzyma, możesz sprawdzić zmienną, iaby zobaczyć, w której kolumnie jest obecnie, co może pomóc Ci dowiedzieć się, co różni się w tej kolumnie od innych. Mam nadzieję, że to pomaga!

Mając <thead>i <tbody>przy tej samej liczbie <th>i <td>rozwiązując mój problem.

Może się to również zdarzyć, jeśli masz argumenty tabeli dotyczące rzeczy, 'aoColumns':[..]które nie pasują do prawidłowej liczby kolumn. Takie problemy mogą często występować podczas kopiowania wklejania kodu z innych stron w celu szybkiego rozpoczęcia integracji danych.

Przykład:

To nie zadziała:

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

Ale to zadziała:

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

Jeszcze jeden powód, dla którego tak się dzieje, to parametr kolumny podczas inicjalizacji DataTable.

Liczba kolumn musi być zgodna z nagłówkami

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

Miałem 7 kolumn

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

Musisz usunąć swój colspanoraz liczbę th i tdnależy dopasować.

Wskazówki 1:

Zapoznaj się z tym linkiem, aby uzyskać kilka pomysłów:

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

Wskazówki 2:

Sprawdź, czy następujące informacje są prawidłowe:

• Proszę sprawdzić Jquery Vesion
• Sprawdź wersję swojego CDN lub lokalnych powiązanych plików .min i css
• twój stół ma <thead></thead>i <tbody></tbody>tagi
• Twoja tabela Długość nagłówka kolumny jest taka sama jak długość kolumny ciała
• Twoje Korzystanie z niektórych cloumns w style='display:none' samej własności dotyczy zarówno nagłówka, jak i ciała.
• kolumny tabeli nie są puste, użyj czegoś takiego jak [Null, -, NA, Nil]
• Twój stół jest jeden bez <td>, <tr>problemu

w moim przypadku ten błąd wystąpił, jeśli korzystam z tabeli bez nagłówka

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

Napotkałem ten sam błąd, gdy próbowałem dodać colspan do ostatniego th

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

i rozwiązał to, dodając ukrytą kolumnę na końcu 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>

Wyjaśnienie tego jest takie, że z jakiegoś powodu DataTable nie może być zastosowana do tabeli z colspan w ostatnim, ale może być zastosowana, jeśli colspan jest używany w jakimkolwiek środkowym.

To rozwiązanie jest nieco zuchwałe, ale prostsze i krótsze niż jakiekolwiek inne rozwiązanie, które znalazłem.

Mam nadzieję, że to komuś pomoże.

Nieco inny problem dla mnie od odpowiedzi podanych powyżej. Dla mnie znaczniki HTML były w porządku, ale brakowało jednej z moich kolumn w javascript i nie pasowało do html.

to znaczy

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

Mój skrypt: -

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

Miałem dynamicznie generowany, ale źle sformatowany stół z literówką. Przez pomyłkę skopiowałem <td>tag w innym <td>. Moja liczba kolumn jest dopasowana. Miałem <thead>i <tbody>tagi. Wszystko pasowało, z wyjątkiem tego małego błędu, którego nie zauważyłem przez pewien czas, ponieważ moja kolumna zawierała wiele tagów linków i obrazów.

Napotkałem ten sam problem, ale generowałem tabelę Dynamicznie . W moim przypadku brakowało mojego stołu <thead>i<tbody> znaczników.

oto mój fragment kodu, jeśli komuś pomógł

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

Oprócz niespójności i liczb, może to również powodować brak elementu w kolumnie kolumn skryptów danych. Korekta, która naprawiła pasek wyszukiwania moich danych.

Mówię o tej części;

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

Walczyłem z tym błędem, dopóki nie wskazałem, że ta część ma o jeden „zero” mniej niż moja całkowita liczba thead.

Ten doprowadził mnie do szału - jak z powodzeniem renderować DataTable w widoku .NET MVC. To działało:

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

Skrypt w pliku JS:

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

W moim przypadku i używając ASP.NET GridView, UpdatePanel i DropDownList (z wtyczką Chosen, w której resetuję wartość do zera za pomocą wiersza Javascript), dostałem ten błąd i próbowałem wszystkiego bez nadziei na kilka dni. Problem polegał na tym, że kod mojego menu rozwijanego w kodzie był następujący i kiedy wybieram wartość dwukrotnie, aby zastosować jej akcję do wybranych wierszy siatki, pojawia się ten błąd. Przez kilka dni myślałem, że to problem z Javascriptem (znowu, w moim przypadku), a na koniec poprawka dawała zero dla wartości drowpdown w procesie aktualizacji:

  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;

  }

To była moja wina:

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

Musisz zawinąć wiersze w <thead>nagłówki kolumn i <tbody>wiersze. Upewnij się również, że masz pasujące nr. nagłówków kolumn, <th>jak w przypadkutd

Mogę pochodzić z pola aoColumns. Jak stwierdzono TUTAJ

aoColumns: Jeśli określono, długość tej tablicy musi być równa liczbie kolumn w oryginalnej tabeli HTML. Użyj „null”, jeśli chcesz używać tylko wartości domyślnych i automatycznie wykrywanych opcji.

Następnie musisz dodać pola jak w tabeli Kolumny

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

w moim przypadku przyczyną tego błędu jest to, że mam 2 tabele o tym samym identyfikatorze z inną strukturą tabeli, z powodu mojego zwyczaju kopiowania i wklejania kodu tabeli. upewnij się, że masz inny identyfikator dla każdej tabeli.

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

Znalazłem jakieś „rozwiązanie”.

Ten kod nie działa:

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

Ale to jest w porządku:

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

Myślę, że problem polega na tym, że ostatni TH nie może mieć atrybutu colspan.