Datatables: Tidak dapat membaca properti 'mData' dari undefined

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

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

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>

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!

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

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>

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>

Anda harus menghapus colspandan jumlah th dan tdkebutuhan untuk mencocokkan.

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

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

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

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.

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>

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.

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

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.

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

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();

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

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

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>

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.