DataTables: Tanımlanmamış özellik stili okunamıyor

Bu hatayı aşağıdaki şekilde alıyorum:

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

Yukarıdaki satır (anonim işlev) @ VM3156: 180'e atıfta bulunur:

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

Bu yüzden başarısız olduğu yerin burası olduğunu tahmin ediyorum.

HTML ID öğesi mevcuttur:

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

Ayrıca, columns.AdoptionTaskInfo.columns ve yanıt nesnesi dizileri mevcuttur. Neyin yanlış olduğunu nasıl ayıklayacağınızdan emin değilim .. Herhangi bir öneri yardımcı olacaktır ..

Sorun, <th> etiketlerinin sayısının yapılandırmadaki sütun sayısıyla ("sütunlar" anahtarına sahip dizi) eşleşmesi gerekmesidir. Belirtilen sütunlardan daha az <th> etiketi varsa, bu biraz şifreli hata mesajını alırsınız.

(doğru cevap zaten bir yorum olarak mevcut, ancak bulması daha kolay olması için cevap olarak tekrar ediyorum - yorumları görmedim)

OLASI NEDENLER

• Sayısı thTablo gövdesinin sütun sayısı tablo başlığında elemanları ya da alt bilgi farklılık ya kullanılarak tanımlanır columnsseçeneği.
• Colspan özelliği thtablo başlığındaki öğe için kullanılır .
• Seçenekte yanlış sütun dizini belirtildi columnDefs.targets.

ÇÖZÜMLER

• thTablo üstbilgisindeki veya altbilgisindeki öğe sayısının columnsseçenekte tanımlanan sütun sayısıyla eşleştiğinden emin olun .
• colspanTablo başlığında öznitelik kullanırsanız , thher sütun için en az iki başlık satırına ve bir benzersiz öğeye sahip olduğunuzdan emin olun . Daha fazla bilgi için Karmaşık başlığa bakın .
• columnDefs.targetsSeçeneği kullanırsanız , sıfır tabanlı sütun dizininin mevcut sütunlara başvurduğundan emin olun.

BAĞLANTILAR

Bkz. JQuery DataTables: Yaygın JavaScript konsolu hataları - TypeError: Daha fazla bilgi için , tanımlanmamış olan 'style' özelliği okunamıyor .

Herhangi bir önerinin yardımcı olacağını söylediniz, bu yüzden şu anda DataTables'ım "tanımlanmamış özellik 'stilini' okuyamıyorum" sorununu çözdüm, ancak sorunum temelde veri tablosu başlatma aşamasında yanlış dizinler kullanmaktı columnDefs. 9 sütunum var ve indeksler 0, 1, 2, .., 8 ama 9 ve 10 için indeksler kullanıyordum, bu yüzden yanlış indeks sorununu düzelttikten sonra hata ortadan kalktı. Umarım bu yardımcı olur.

Kısacası, her yerde tutarlıysa sütun miktarınızı ve indekslerinizi izlemelisiniz.

Buggy Kodu:

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

Sabit Kod:

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

colspanTablo başlığını ayarladığımda bu sorunu yaşadım . Yani masam şöyleydi:

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

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

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

Sonra bir kez değiştirdim:

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

Her şey yolunda gitti.

Giriş verilerinizde response[i]ve / response[i][j]olmadığından emin olun .undefinednull

Öyleyse, bunları "" ile değiştirin.

Yeni (diğer) bir tablo çizerken de olabilir. Bunu önce önceki tabloyu kaldırarak çözdüm:

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

Çözüm oldukça basit.

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

                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>

Not : sütunlar: columns.AdoptionTaskInfo.columns, tablo başlığında tanımlanmamış en az bir sütun içeriyor

Tuhaf bir şekilde, bir th / th çifti çok fazla olduğu için aşağıdaki hatayı alıyordum ve hala google beni buraya yönlendirdi. İnsanların bulabilmesi için onu yazılı olarak bırakacağım.

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)

Benim durumumda, sunucu taraflı datatable'ı iki kez güncelliyordum ve bana bu hatayı veriyor. Umarım birine yardımcı olur.