Datatables: Tidak dapat membaca properti 'mData' dari undefined


307

Saya memiliki masalah dengan Datatables. Saya juga melalui tautan ini yang tidak membuahkan hasil apa pun. Saya telah memasukkan semua prasyarat di mana saya mem-parsing data langsung ke DOM. Mohon bantu saya untuk memperbaiki masalah ini.

Naskah

$(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]
    }],
  });
});

4
dapatkah Anda menampilkan html dari tabel Anda?
Ehsan Sajjad

maaf karena tidak memposting html..terima kasih atas perhatian Anda..saya memperbaiki masalah saya :).
Thriveni

10
Kesalahan "Tidak dapat membaca properti 'mData' tidak terdefinisi" juga muncul ketika menggunakan thead yang terbentuk dengan baik dengan colspan tetapi tanpa baris kedua untuk mendapatkan yang pertama per td
PaulH

jalankan dengan mengomentari fungsi .dataTable () terlebih dahulu, kemudian lihat tabel, Anda akan menemukan masalah dalam lebih banyak kasus
Rajdeep

kolom thead atau heading tabel harus hilang dari tabel, jadi skrip tidak dapat menemukan itu, silakan periksa heading Anda di bawah thead atau nama kolom apa pun
Rahul Jain

Jawaban:


660

FYI DataTables membutuhkan meja terbentuk dengan baik. Itu harus berisi <thead>dan memberi <tbody>tag, jika tidak maka akan menimbulkan kesalahan ini. Juga periksa untuk memastikan semua baris Anda termasuk baris tajuk memiliki jumlah kolom yang sama.

Berikut ini akan menimbulkan kesalahan (tidak <thead>dan <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>

Berikut ini juga akan menimbulkan kesalahan (jumlah kolom yang tidak sama)

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

Untuk info lebih lanjut, baca lebih lanjut di sini


11
Ada <td> tambahan pada <tbody> saya ketika saya menghapusnya terbangun !! terima kasih banyak
Dipen

3
@SarowerJahan senang saya bisa membantu.
Moses Machua

3
Hanya menghabiskan satu hari penuh untuk masalah ini. Masalah? Saya punya 2 tetapi 3 td. Menendang diri sendiri pada masalah konyol! Terima kasih banyak.
IfElseTryCatch

1
@foxontherock, berdasarkan konvensi itu. Apa yang Anda jelaskan adalah konfigurasi khusus yang saya ketahui, tetapi jika Anda tidak memberikan konfigurasi khusus, maka default untuk konvensi yang alamat jawaban saya
Moses Machua

1
Anda teman saya adalah pria rudal bermata baja! Saya kehilangan <th> :-) :-)
Andy

80

Penyebab umum Cannot read property 'fnSetData' of undefinedadalah jumlah kolom yang tidak cocok, seperti dalam kode yang salah ini:

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

Sementara kode berikut dengan satu <th>per<td> (jumlah kolom harus cocok) berfungsi:

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

Kesalahan juga muncul saat menggunakan thead yang terbentuk dengan baik dengan colspan tetapi tanpa baris kedua.

Untuk tabel dengan 7 kolom, berikut ini tidak berfungsi dan kita melihat "Tidak dapat membaca properti 'mData' dari undefined" di konsol javascript:

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

Sementara ini bekerja:

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

5
Menemukan jawaban Anda bermanfaat. Markup saya tidak ada yang trdigunakan untuk melampirkan semua thelemen. Hanya meninggalkannya di sini kalau-kalau ada yang menemukan ini berguna!
Vikram Deshmukh

Jawaban ini juga menuntun saya ke solusi saya. Saya kehilangan thkolom di kolom saya thead, yang menyebabkan kesalahan. Jawaban oleh Nathan Hanna juga sepertinya mengindikasikan masalah ini juga.
Paul Richter

bantuan ini saya melihat bahwa saya memiliki hilang thdi saya theadjuga!
Demi Magus

Bahkan colspaninterpretasi selama empat tahun masih menjadi masalah. Saya harus memasukkan beberapa kosong thdan tidak colspanuntuk menyingkirkan kesalahan. Tetapi apa yang sederhana menambahkan untuk mendapatkan fungsi ini. BTW: Rails 5.1.5, Bootstrap 4.0.0. Saya baru saja menambahkan stylesheet dan skrip CDNs, dan $(document).ready…ke halaman.
Greg

@Reg Maaf, saya tidak mengerti.
PaulH

43

Saya punya masalah yang sama menggunakan data DOM dalam tampilan Rails yang dibuat melalui generator scaffold. Secara default, tampilan menghilangkan <th>elemen untuk tiga kolom terakhir (yang berisi tautan untuk menampilkan, menyembunyikan, dan memusnahkan catatan). Saya menemukan bahwa jika saya menambahkan judul untuk kolom-kolom itu dalam <th>elemen di dalam<thead> yang sudah diperbaiki masalahnya.

Saya tidak bisa mengatakan apakah ini masalah yang sama dengan yang Anda alami karena saya tidak dapat melihat html Anda. Jika itu bukan masalah yang sama, Anda dapat menggunakan debugger krom untuk mencari tahu kolom mana yang membuat kesalahan dengan mengklik pada kesalahan di konsol (yang akan membawa Anda ke kode itu gagal), kemudian menambahkan sebuah kondisional breakpoint (at col==undefined). Ketika berhenti, Anda dapat memeriksa variabel iuntuk melihat kolom mana saat ini yang dapat membantu Anda mencari tahu apa yang berbeda dari kolom itu dari yang lain. Semoga itu bisa membantu!

kesalahan debug data mData


1
Ini adalah satu-satunya metode yang membantu saya memecahkan masalah saya. Terima kasih!
Mike Crowe

Tidak yakin Anda sudah menyebutkan ini, tapi kami bisa "melihat" variabel di kolom kanan dan mencari tahu tabel mana yang terkait. Untuk kasus saya, ini adalah render default tabel Asp.Net, yang tidak distandarisasi saat tabel kosong. Terima kasih atas tipnya!
Hoàng Long

Terima kasih ... Nathan untuk langkah-langkah debugging. Itu membantu saya.
Sachin Gaikwad

1
Bagi saya, masalahnya diperbaiki dengan menambahkan elemen thead dan tbody.
neolei

Saya memiliki pengaturan Rails yang sama, tetapi saya telah menamai tiga kolom terakhir "Perincian" dengan colspan="3"tetapi saya mendapatkan kesalahan (itulah sebabnya saya berakhir di halaman ini). Saya sedikit mengotak-atik, tetapi akhirnya menyerah dan menciptakan tiga thelemen dan dengan yang pertama "Detail" dan membiarkan dua yang terakhir kosong. Mengotak-atik menyarankan bahwa dataTables memiliki masalah dengan colspan sebagai yang terakhir dalam seri. Perbaikan OP aneh karena jumlah kolom tidak bertambah. Saya tidak memiliki kondisi di atas meja, seperti orderatau sortable. Saya menambahkannya setelah berhasil.
Greg

31

Memiliki <thead>dan <tbody>dengan jumlah yang sama <th>dan <td>memecahkan masalah saya.


1
Terima kasih, itu juga masalah saya. Jawaban Anda sangat membantu Pak.
fmquaglia

27

Ini juga dapat terjadi jika Anda memiliki argumen tabel untuk hal-hal seperti 'aoColumns':[..] yang tidak cocok dengan jumlah kolom yang benar. Masalah seperti ini biasanya dapat terjadi ketika menyalin kode paste dari halaman lain untuk memulai dengan cepat integrasi datatables Anda.

Contoh:

Ini tidak akan berfungsi:

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

Tetapi ini akan berhasil:

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

1
Persis masalah saya, hanya dengan properti 'kolom'.
Nick Poulos

@NickPoulos Ya, itu bisa terjadi pada parameter konfigurasi apa pun jika referensi indeks yang tidak ada dalam tabel.
DrewT

12

Satu lagi alasan mengapa ini terjadi adalah karena parameter kolom dalam inisialisasi DataTable.

Jumlah kolom harus sesuai dengan header

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

Saya punya 7 kolom

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


8

Kiat 1:

Lihat Tautan ini Anda mendapatkan beberapa Ide:

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

Kiat 2:

Periksa yang berikut ini benar:

  • Silakan periksa Jquery Vesion
  • Silakan periksa versi CDN Anda atau file .min & css terkait dataat lokal Anda
  • meja Anda sudah <thead></thead>&<tbody></tbody> tag
  • Meja Anda Kolom Tajuk Panjangnya sama dengan Badan Panjang Kolom
  • Anda Menggunakan beberapa cloumns di style='display:none' sebagai propery yang sama berlaku di dalam kamu baik header & tubuh.
  • kolom tabel Anda tidak kosong, gunakan sesuatu seperti [Null, -, NA, Nil]
  • Meja Anda bagus tanpa <td>, <tr>masalah

<thead> </thead> dan <tbody> </tbody> selesaikan masalah saya. Terima kasih.
MrTex

6

dalam kasus saya kesalahan ini terjadi jika saya menggunakan tabel tanpa header

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

1
Terima kasih - saya dapat mengkonfirmasi bahwa ini juga memperbaiki kesalahan saya.
Rog

5

Saya menghadapi kesalahan yang sama, ketika mencoba menambahkan colspan ke th terakhir

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

dan menyelesaikannya dengan menambahkan kolom tersembunyi ke ujung 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>

Penjelasan untuk itu adalah bahwa untuk beberapa alasan DataTable tidak dapat diterapkan ke tabel dengan colspan di yang terakhir, tetapi dapat diterapkan, jika colspan digunakan di tengah mana pun.

Solusi ini agak hacky, tetapi lebih sederhana dan lebih pendek daripada solusi lain yang saya temukan.

Saya harap itu akan membantu seseorang.


3

Masalah yang sedikit berbeda bagi saya dari jawaban yang diberikan di atas. Bagi saya, markup HTML baik-baik saja, tetapi salah satu kolom saya di javascript hilang dan tidak cocok dengan html.

yaitu

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

Skrip Saya: -

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

3

Saya memiliki tabel yang dihasilkan secara dinamis, tetapi bentuknya buruk dengan salah ketik. Saya menyalin <td>tag di dalam tag lain <td>karena kesalahan. Jumlah kolom saya cocok. Saya punya <thead>dan <tbody>tag. Semuanya cocok, kecuali untuk kesalahan kecil ini yang tidak saya perhatikan untuk sementara waktu, karena kolom saya memiliki banyak tautan dan tag gambar di dalamnya.


2

Saya telah mengalami masalah yang sama tetapi saya menghasilkan tabel secara dinamis . Dalam kasus saya, meja saya hilang <thead>dan <tbody>ditandai.

di sini adalah potongan kode saya jika itu membantu seseorang

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

2

Selain nomor dan tidak konsisten, item yang hilang di dalam bagian kolom skrip yang dapat didaftarkan juga dapat menyebabkan hal ini. Memperbaiki yang memperbaiki bilah pencarian datatables saya.

Saya berbicara tentang bagian ini;

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

Saya berjuang dengan kesalahan ini sampai saya ditunjukkan bahwa bagian ini memiliki satu kurang "nol" dari jumlah total thead saya.


2

Yang ini membuatku gila - bagaimana membuat DataTable berhasil dalam tampilan .NET MVC. Ini berhasil:

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

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

1

Dalam kasus saya, dan menggunakan ASP.NET GridView, UpdatePanel dan dengan DropDownList (dengan plugin Pilihan di mana saya mereset nilai ke nol menggunakan garis Javascript), saya mendapatkan kesalahan ini dan mencoba semuanya tanpa harapan selama berhari-hari. Masalahnya adalah bahwa kode dropdown saya dalam kode di belakang adalah sebagai berikut dan ketika saya memilih nilai dua kali untuk menerapkan aksinya pada baris grid yang dipilih saya mendapatkan kesalahan itu. Saya pikir berhari-hari ini adalah masalah Javascript (sekali lagi, dalam kasus saya) dan akhirnya perbaikannya memberikan nol untuk nilai drowpdown dengan proses pembaruan:

  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;

  }

Ini salah saya:

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

0

Anda perlu membungkus baris Anda <thead>untuk header kolom dan <tbody>untuk baris. Pastikan juga Anda tidak mencocokkan no. header kolom <th>seperti yang Anda lakukan untuktd


0

Saya mungkin muncul oleh bidang aoColumns. Seperti yang dinyatakan DI SINI

aoColumns: Jika ditentukan, maka panjang array ini harus sama dengan jumlah kolom dalam tabel HTML asli. Gunakan 'null' di mana Anda hanya ingin menggunakan nilai default dan opsi yang terdeteksi secara otomatis.

Maka Anda harus menambahkan bidang seperti pada tabel Kolom

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

0

dalam kasus saya penyebab kesalahan ini adalah saya memiliki 2 tabel yang memiliki nama id yang sama dengan struktur tabel yang berbeda, karena kebiasaan saya menyalin-tempel kode tabel. pastikan Anda memiliki id berbeda untuk setiap tabel.

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


-3

Saya menemukan beberapa "solusi".

Kode ini tidak berfungsi:

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

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

Saya pikir, masalahnya adalah, bahwa TH terakhir tidak dapat memiliki atribut colspan.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.