DataTables: ไม่สามารถอ่านรูปแบบคุณสมบัติของ undefined

118

ฉันได้รับข้อผิดพลาดดังต่อไปนี้:

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

บรรทัดด้านบนอ้างถึง (ฟังก์ชันนิรนาม) @ VM3156: 180 คือ:

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

ดังนั้นฉันเดาว่านี่คือจุดที่ล้มเหลว

องค์ประกอบ HTML ID มีอยู่:

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

นอกจากนี้ยังมีคอลัมน์ AdoptionTaskInfo.columns & อาร์เรย์อ็อบเจ็กต์การตอบกลับ ไม่แน่ใจว่าจะแก้จุดบกพร่องอย่างไร .. ข้อเสนอแนะใด ๆ จะเป็นประโยชน์ ..

javascript  jquery  node.js  datatables 
— มือใหม่
แหล่งที่มา
2
มองหา.styleในรหัสของคุณ คุณกำลังพยายามเข้าถึงคุณสมบัติของตัวแปรที่ไม่ได้กำหนด คุณสามารถแก้ไขข้อบกพร่องได้จากที่นั่น
— Jecoms
80
ตรวจสอบว่าจำนวนคอลัมน์ที่คุณพยายามดึงนั้นตรงกับจำนวน <th> ที่คุณสร้างไว้หรือไม่
— matrixguy
12
จำนวนคอลัมน์ th ไม่ตรงกับจำนวนคอลัมน์ที่กำหนดในจาวาสคริปต์ทำให้เกิดปัญหานี้
— Dhanuka777

คำตอบ:

284

ปัญหาคือจำนวนแท็ก <th> ต้องตรงกับจำนวนคอลัมน์ในการกำหนดค่า (อาร์เรย์ที่มีคีย์ "คอลัมน์") หากมีแท็ก <th> น้อยกว่าคอลัมน์ที่ระบุคุณจะได้รับข้อความแสดงข้อผิดพลาดที่คลุมเครือเล็กน้อย

(คำตอบที่ถูกต้องมีอยู่แล้วเป็นความคิดเห็น แต่ฉันกำลังพูดซ้ำเป็นคำตอบเพื่อให้ค้นหาได้ง่ายขึ้น - ฉันไม่เห็นความคิดเห็น)

— ehrencrona
แหล่งที่มา
2
ฉันต้องการเพิ่มอีกจุดหนึ่งอาจมีคนพบว่ามันมีประโยชน์ใน somecase ถ้าคุณไม่กำหนด dataSrc จากนั้นใน json ของคุณให้ใช้ "data" หากคุณใช้ชื่ออื่นคุณจะได้รับข้อผิดพลาดนี้
— Ahmed Sunny
นอกจากนี้หากคุณมีคอลัมน์ที่มองไม่เห็น แต่รวมไว้สำหรับสิ่งต่างๆเช่นการค้นหาหรือตัวแก้ไขคอลัมน์เหล่านั้นจะต้องอยู่ท้ายคอลัมน์ของคุณ: [] รายการ
— Tim Dearborn
ขอบคุณมากฉันสงสัยว่าปัญหาในจาวาสคริปต์ ..
— Jimil Choksi
24

สาเหตุที่เป็นไปได้

  • จำนวนthองค์ประกอบในส่วนหัวหรือส่วนท้ายของตารางแตกต่างจากจำนวนคอลัมน์ในเนื้อหาตารางหรือกำหนดโดยใช้columnsตัวเลือก
  • แอตทริบิวต์ colspan ใช้สำหรับthองค์ประกอบในส่วนหัวของตาราง
  • ระบุดัชนีคอลัมน์ไม่ถูกต้องในcolumnDefs.targetsตัวเลือก

แนวทางแก้ไข

  • ตรวจสอบให้แน่ใจว่าจำนวนthองค์ประกอบในส่วนหัวหรือส่วนท้ายของตารางตรงกับจำนวนคอลัมน์ที่กำหนดไว้ในcolumnsตัวเลือก
  • หากคุณใช้colspanแอตทริบิวต์ในส่วนหัวของตารางตรวจสอบให้แน่ใจว่าคุณมีแถวส่วนหัวอย่างน้อยสองแถวและthองค์ประกอบที่ไม่ซ้ำกันหนึ่งรายการสำหรับแต่ละคอลัมน์ ดูส่วนหัวที่ซับซ้อนสำหรับข้อมูลเพิ่มเติม
  • หากคุณใช้columnDefs.targetsตัวเลือกตรวจสอบให้แน่ใจว่าดัชนีคอลัมน์ที่ใช้ศูนย์อ้างอิงถึงคอลัมน์ที่มีอยู่

ลิงค์

ดูjQuery DataTables: ข้อผิดพลาดคอนโซล JavaScript ทั่วไป - TypeError: ไม่สามารถอ่านคุณสมบัติ 'style' ของที่ไม่ได้กำหนดสำหรับข้อมูลเพิ่มเติม

— Gyrocode.com
แหล่งที่มา
13

คุณบอกว่าข้อเสนอแนะใด ๆ ที่เป็นประโยชน์ดังนั้นตอนนี้ฉันจึงแก้ไขปัญหา DataTables ของฉัน "ไม่สามารถอ่านคุณสมบัติ 'style' of undefined" ได้ แต่ปัญหาของฉันคือการใช้ดัชนีที่ไม่ถูกต้องในcolumnDefsส่วนของขั้นตอนการเริ่มต้นตารางข้อมูล ฉันมี 9 คอลัมน์และดัชนีคือ 0, 1, 2, .. , 8 แต่ฉันใช้ดัชนีสำหรับ 9 และ 10 ดังนั้นหลังจากแก้ไขปัญหาดัชนีผิดแล้วความผิดพลาดจึงหายไป ฉันหวังว่านี่จะช่วยได้.

ในระยะสั้นคุณต้องดูจำนวนคอลัมน์และดัชนีหากสอดคล้องกันทุกที่

รหัส 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
        ]
    });

รหัสคงที่:

    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
        ]
    });
— กฤษณา Tasdemir
แหล่งที่มา
สิ่งนี้ช่วยฉันได้ขอบคุณ ฉันใช้ "aTargets": [7] ดังนั้นมันจึงเข้าสู่ข้อผิดพลาดเพราะไม่มีคอลัมน์ที่มีดัชนี 7 legacy.datatables.net/usage/columns
— fudu
1
เยี่ยมมากฉันดีใจที่คำตอบของฉันแก้ไขปัญหาของคุณได้โปรด + โหวต
— Bahadir Tasdemir
10

ฉันมีปัญหานี้เมื่อฉันตั้งค่าcolspanในส่วนหัวของตาราง ดังนั้นโต๊ะของฉันคือ:

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

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

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

จากนั้นเมื่อฉันเปลี่ยนเป็น:

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

ทุกอย่างทำงานได้ดี

— JustLearning
แหล่งที่มา
4

ตรวจสอบให้แน่ใจว่าในการป้อนข้อมูลของคุณresponse[i]และresponse[i][j]จะไม่ได้/undefinednull

ในกรณีนี้ให้แทนที่ด้วย ""

— David I. Samudio
แหล่งที่มา
3

นอกจากนี้ยังสามารถเกิดขึ้นได้เมื่อวาดตาราง (อื่น ๆ ) ใหม่ ฉันแก้ไขสิ่งนี้โดยการลบตารางก่อนหน้าก่อน:

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

— บุคคลทั่วไป
แหล่งที่มา
2

วิธีแก้ปัญหาค่อนข้างง่าย 

  <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>
ขยายข้อมูลโค้ด

หมายเหตุ : คอลัมน์: column.AdoptionTaskInfo.columns มีคอลัมน์อย่างน้อยที่ไม่ได้กำหนดไว้ในส่วนหัวตาราง

— สแตนลีย์ Okpala Nwosa
แหล่งที่มา
1

สนุกดีฉันได้รับข้อผิดพลาดต่อไปนี้เนื่องจากมีคู่ th- / th หนึ่งคู่มากเกินไปและ Google ยังคงนำทางฉันมาที่นี่ ฉันจะเขียนทิ้งไว้เพื่อให้คนอื่นค้นพบ

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
แหล่งที่มา
0

ในกรณีของฉันฉันกำลังอัปเดตข้อมูลฝั่งเซิร์ฟเวอร์สองครั้งและทำให้ฉันเกิดข้อผิดพลาดนี้ หวังว่ามันจะช่วยใครบางคน

— ไทอัน
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.