DataTables: Tidak dapat membaca gaya properti yang tidak ditentukan

118

Saya mendapatkan kesalahan ini dengan yang berikut:

jquery.dataTables.js:4089 Uncaught TypeError: Cannot read property 'style' of undefined(…)
_fnCalculateColumnWidths @ jquery.dataTables.js:4089
_fnInitialise @ jquery.dataTables.js:3216
(anonymous function) @ jquery.dataTables.js:6457
each @ jquery-2.0.2.min.js:4
each @ jquery-2.0.2.min.js:4
DataTable @ jquery.dataTables.js:5993
$.fn.DataTable @ jquery.dataTables.js:14595
(anonymous function) @ VM3329:1
(anonymous function) @ VM3156:180
l @ jquery-2.0.2.min.js:4
fireWith @ jquery-2.0.2.min.js:4
k @ jquery-2.0.2.min.js:6
(anonymous function) @ jquery-2.0.2.min.js:6

Baris di atas yang mengacu pada (fungsi anonim) @ VM3156: 180 adalah:

                TASKLISTGRID = $("#TASK_LIST_GRID").DataTable({
                    data : response,
                    columns : columns.AdoptionTaskInfo.columns,
                    paging: true
                });

Jadi saya menduga di sinilah kegagalannya.

Elemen ID HTML ada:

  <table id="TASK_LIST_GRID" class="table table-striped table-bordered table-hover dataTable no-footer" width="100%" role="grid" aria-describedby="TASK_LIST_GRID_info">
  <thead>
    <tr role="row">
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Solution</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Status</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Category</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Type</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Due Date</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Create Date</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Owner</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Comments</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Mnemonic</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Domain</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Approve</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Dismiss</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Juga, ada array objek columns.AdoptionTaskInfo.columns & respons. Tidak yakin bagaimana men-debug apa yang salah .. Ada saran yang akan membantu ..

javascript  jquery  node.js  datatables 
— Calon
sumber
2
Cari .styledi kode Anda. Anda mencoba mengakses properti variabel tak terdefinisi. Anda dapat melakukan debug dari sana.
— Jecoms
80
Periksa apakah jumlah kolom yang Anda coba ambil sama dengan jumlah <th> yang Anda buat.
— matrixguy
12
Jumlah ketidaksesuaian kolom dengan jumlah kolom yang ditentukan dalam javascript yang menyebabkan masalah ini.
— Dhanuka777

Jawaban:

284

Masalahnya adalah jumlah tag <th> harus sesuai dengan jumlah kolom dalam konfigurasi (array dengan "kolom" kunci). Jika ada lebih sedikit tag <th> dari kolom yang ditentukan, Anda mendapatkan pesan kesalahan yang sedikit samar ini.

(jawaban yang benar sudah ada sebagai komentar tetapi saya mengulanginya sebagai jawaban agar lebih mudah ditemukan - saya tidak melihat komentar)

— ehrencrona.dll
sumber
2
Saya ingin menambahkan poin lain, mungkin orang merasa terbantu dalam beberapa kasus, jika Anda tidak mendefinisikan dataSrc maka di json Anda gunakan "data", jika Anda menggunakan nama lain Anda akan mendapatkan kesalahan ini.
— Ahmed Sunny
Selain itu, jika Anda memiliki kolom yang tidak terlihat tetapi disertakan untuk hal-hal seperti penelusuran atau Editor, kolom tersebut harus berada di akhir kolom Anda: daftar [].
— Tim Dearborn
Terima kasih banyak, saya bertanya-tanya masalah di javascripts ..
— Jimil Choksi
24

KEMUNGKINAN PENYEBAB

  • Jumlah thelemen di header atau footer tabel berbeda dengan jumlah kolom di badan tabel atau ditentukan menggunakancolumns opsi.
  • Atribut colspan digunakan untuk thelemen di header tabel.
  • Indeks kolom yang salah ditentukan dalam columnDefs.targetsopsi.

SOLUSI

  • Pastikan jumlah thelemen di header atau footer tabel cocok dengan jumlah kolom yang ditentukan dalam columnsopsi.
  • Jika Anda menggunakan colspanatribut di header tabel, pastikan Anda memiliki setidaknya dua baris header dan satu thelemen unik untuk setiap kolom. Lihat Header kompleks untuk informasi selengkapnya.
  • Jika Anda menggunakan columnDefs.targetsopsi, pastikan bahwa indeks kolom berbasis nol merujuk ke kolom yang sudah ada.

TAUTAN

Lihat jQuery DataTables: Kesalahan umum konsol JavaScript - TypeError: Tidak dapat membaca 'gaya' properti tidak terdefinisi untuk informasi selengkapnya.

— Gyrocode.com
sumber
13

Anda mengatakan saran apa pun akan sangat membantu, jadi saat ini saya menyelesaikan masalah "tidak dapat membaca properti 'gaya' tidak terdefinisi" pada Tabel Data saya, tetapi masalah saya pada dasarnya menggunakan indeks yang salah di columnDefsbagian tahap inisiasi tabel data . Saya mendapat 9 kolom dan indeksnya adalah 0, 1, 2, .., 8 tetapi saya menggunakan indeks untuk 9 dan 10 jadi setelah memperbaiki masalah indeks yang salah, kesalahan telah hilang. Saya harap ini membantu.

Singkatnya, Anda harus memperhatikan jumlah kolom dan indeks Anda jika konsisten di mana-mana.

Kode Buggy:

    jQuery('#table').DataTable({
        "ajax": {
            url: "something_url",
            type: 'POST'
        },
        "processing": true,
        "serverSide": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "columns": [
            { "data": "cl1" },
            { "data": "cl2" },
            { "data": "cl3" },
            { "data": "cl4" },
            { "data": "cl5" },
            { "data": "cl6" },
            { "data": "cl7" },
            { "data": "cl8" },
            { "data": "cl9" }
        ],
        columnDefs: [
            { orderable: false, targets: [ 7, 9, 10 ] } //This part was wrong
        ]
    });

Kode Tetap:

    jQuery('#table').DataTable({
        "ajax": {
            url: "something_url",
            type: 'POST'
        },
        "processing": true,
        "serverSide": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "columns": [
            { "data": "cl1" },
            { "data": "cl2" },
            { "data": "cl3" },
            { "data": "cl4" },
            { "data": "cl5" },
            { "data": "cl6" },
            { "data": "cl7" },
            { "data": "cl8" },
            { "data": "cl9" }
        ],
        columnDefs: [
            { orderable: false, targets: [ 5, 7, 8 ] } //This part is ok now
        ]
    });
— Bahadir Tasdemir
sumber
Ini menyelamatkan saya, terima kasih. Saya menggunakan "aT Target": [7], jadi masuk ke error, karena tidak ada kolom dengan indeks 7. legacy.datatables.net/usage/columns
— fudu
1
Hebat Saya senang jawaban saya memperbaiki masalah Anda, + mohon suara
— Bahadir Tasdemir
10

Saya mengalami masalah ini ketika saya mengatur colspandi header tabel. Jadi meja saya adalah:

        <thead>
            <tr>
                <th colspan="2">Expenses</th>

                <th colspan="2">Income</th>

                <th>Profit/Loss</th>
            </tr>
        </thead>

Kemudian setelah saya mengubahnya menjadi:

        <thead>
            <tr>
                <th>Expenses</th>
                <th></th>
                <th>Income</th>
                <th></th>
                <th>Profit/Loss</th>
            </tr>
        </thead>

Semuanya bekerja dengan baik.

— Hanya belajar
sumber
4

Pastikan bahwa dalam data masukan Anda, response[i]dan response[i][j], bukan undefined/ null.

Jika demikian, gantilah dengan "".

— David I. Samudio
sumber
3

Itu juga bisa terjadi saat menggambar tabel baru (lainnya). Saya menyelesaikan ini dengan terlebih dahulu menghapus tabel sebelumnya:

$("#prod_tabel_ph").remove();

— Tamu
sumber
2

Solusinya cukup sederhana. 

  <table id="TASK_LIST_GRID" class="table table-striped table-bordered table-hover dataTable no-footer" width="100%" role="grid" aria-describedby="TASK_LIST_GRID_info">
  <thead>
    <tr role="row">
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Solution</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Status</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Category</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Type</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Due Date</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Create Date</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Owner</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Comments</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Mnemonic</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Domain</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Approve</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Dismiss</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
Luaskan cuplikan

                TASKLISTGRID = $("#TASK_LIST_GRID").DataTable({
                    data : response,
                    columns : columns.AdoptionTaskInfo.columns,
                    paging: true
                });
                
                //Note: columns : columns.AdoptionTaskInfo.columns has at least a column not definded in the <thead>
Luaskan cuplikan

Catatan : kolom: koloms.AdoptionTaskInfo.columns memiliki setidaknya satu kolom yang tidak ditentukan di kepala tabel

— Stanley Okpala Nwosa
sumber
1

Lucunya saya mendapatkan kesalahan berikut karena memiliki satu pasangan terlalu banyak dan Google masih mengarahkan saya ke sini. Saya akan membiarkannya tertulis sehingga orang dapat menemukannya.

jquery.dataTables.min.js:27 Uncaught TypeError: Cannot read property 'className' of undefined
at ua (jquery.dataTables.min.js:27)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:127)
at Function.each (jquery.min.js:2)
at n.fn.init.each (jquery.min.js:2)
at n.fn.init.j (jquery.dataTables.min.js:116)
at HTMLDocument.<anonymous> (history:619)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.K (jquery.min.js:2)
— Tomás Gaete
sumber
0

Dalam kasus saya, saya memperbarui data sisi server dua kali dan itu memberi saya kesalahan ini. Semoga bisa membantu seseorang.

— Taian
sumber
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.