डेटाटेबल्स: अपरिभाषित की संपत्ति शैली नहीं पढ़ सकते हैं

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अपने कोड में। आप अपरिभाषित चर की उस संपत्ति तक पहुंचने का प्रयास कर रहे हैं। आप वहां से डिबग कर सकते हैं।
— जेकॉम्स 7'16
80
जांचें कि क्या आप जिस कॉलम को लाने का प्रयास कर रहे हैं, वह आपके द्वारा बनाए गए <th> की संख्या के समान है।
— १
12
इस समस्या के कारण javascripts में परिभाषित स्तंभों की संख्या के साथ वें कॉलम बेमेल की संख्या।
— धनुका Dhan।

जवाबों:

284

समस्या यह है कि कॉन्फ़िगरेशन में स्तंभों की संख्या (कुंजी "कॉलम" के साथ सरणी) से मिलान करने के लिए <th> टैग की संख्या की आवश्यकता है। यदि निर्दिष्ट कॉलम की तुलना में कम <th> टैग हैं, तो आपको यह थोड़ा गुप्त त्रुटि संदेश मिलता है।

(सही उत्तर पहले से ही एक टिप्पणी के रूप में मौजूद है, लेकिन मैं इसे एक उत्तर के रूप में दोहरा रहा हूं, इसलिए इसे खोजना आसान है - मैंने टिप्पणियां नहीं देखीं)

— ehrencrona
स्रोत
2
मैं एक और बिंदु जोड़ना चाहता हूं, हो सकता है कि लोग इसे somecase में मददगार पाएं, यदि आप dataSrc को परिभाषित नहीं करते हैं तो अपने json उपयोग "डेटा" में, यदि आप किसी अन्य नाम का उपयोग करते हैं तो आपको यह त्रुटि मिलेगी।
— अहमद सनी
इसके अलावा, यदि आपके पास ऐसे कॉलम हैं जो दृश्यमान नहीं हैं, लेकिन खोज या संपादक जैसी चीजों के लिए शामिल हैं, तो उन्हें आपके कॉलम के अंत में होना चाहिए: [] सूची।
— टिम डियरबॉर्न
बहुत बहुत धन्यवाद, मैं javascripts में मुद्दों सोच रहा था ..
— जिमिल चोकसी
24

संभावित कारण

  • की संख्या thतालिका शरीर में स्तंभों की संख्या से तालिका शीर्ष लेख में तत्वों या पाद लेख अलग है या का उपयोग करके परिभाषित columnsविकल्प।
  • एट्रिब्यूट कोलस्पैन का उपयोग thटेबल हेडर में तत्व के लिए किया जाता है ।
  • columnDefs.targetsविकल्प में निर्दिष्ट गलत कॉलम इंडेक्स ।

समाधान

  • सुनिश्चित करें कि thतालिका शीर्ष लेख या पाद लेख में तत्वों की संख्या columnsविकल्प में परिभाषित स्तंभों की संख्या से मेल खाती है।
  • यदि आप colspanतालिका शीर्ष लेख में विशेषता का उपयोग करते हैं , तो सुनिश्चित करें कि आपके पास thप्रत्येक स्तंभ के लिए कम से कम दो शीर्ष लेख पंक्तियाँ और एक अद्वितीय तत्व है। अधिक जानकारी के लिए कॉम्प्लेक्स हेडर देखें ।
  • यदि आप columnDefs.targetsविकल्प का उपयोग करते हैं , तो सुनिश्चित करें कि शून्य-आधारित कॉलम इंडेक्स मौजूदा कॉलम को संदर्भित करता है।

लिंक

JQuery के डेटाटैब देखें : सामान्य जावास्क्रिप्ट कंसोल त्रुटियां - टाइपर्रर: अधिक जानकारी के लिए अपरिभाषित की संपत्ति 'शैली' नहीं पढ़ सकते हैं ।

— Gyrocode.com
स्रोत
13

आपने कहा कि किसी भी सुझाव को मददगार होना चाहिए, इसलिए वर्तमान में मैंने अपने डेटाटेबल्स को हल किया "अपरिभाषित" समस्या की संपत्ति 'शैली' नहीं पढ़ सकता है, लेकिन मेरी समस्या मूल रूप से डेटा टेबल दीक्षा चरण के columnDefsअनुभाग में गलत अनुक्रमित का उपयोग कर रही थी । मुझे 9 कॉलम मिले और इंडेक्स 0, 1, 2, .., 8 हैं, लेकिन मैं 9 और 10 के लिए इंडेक्स का उपयोग कर रहा था, इसलिए गलत इंडेक्स समस्या को ठीक करने के बाद गलती गायब हो गई है। आशा है कि ये आपकी मदद करेगा।

संक्षेप में, आपको अपनी कॉलम राशि और अनुक्रमित देखने को मिलेंगे यदि हर जगह संगत हो।

छोटी गाड़ी कोड:

    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
        ]
    });
— बहादुर तस्दीमिर
स्रोत
इसने मुझे बचाया, धन्यवाद। मैं "aTargets" का उपयोग करता हूं: ["], इसलिए इसकी गलती है, क्यूज
— fudu
1
बहुत खुश हूं कि मेरा जवाब आपके मुद्दे को तय करता है, + वोट कृपया
— बहादुर तस्दीमिर
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>

सब कुछ ठीक काम किया।

— बस सीख रहा हूँ
स्रोत
4

सुनिश्चित करें कि आपके इनपुट डेटा में, response[i]और response[i][j], undefined/ नहीं हैं null।

यदि हां, तो उन्हें "" से बदलें।

— डेविड आई। सैमडियो
स्रोत
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>
स्निपेट का विस्तार करें

नोट : कॉलम: columns.AdoptionTaskInfo.columns में कम से कम एक स्तंभ है जिसे टेबल हेड में परिभाषित नहीं किया गया है

— स्टैनली ओक्पालालोसा
स्रोत
1

निस्संदेह मैं एक के बाद एक के लिए निम्नलिखित त्रुटि हो रही थी- / वें जोड़ी बहुत सारे और अभी भी गूगल ने मुझे यहाँ निर्देशित किया है। मैं इसे लिख कर छोड़ दूंगा ताकि लोग इसे ढूंढ सकें।

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)
— टामसे गते
स्रोत
0

मेरे मामले में, मैं दो बार सर्वर-साइड डेटेड अद्यतन कर रहा था और यह मुझे यह त्रुटि देता है। आशा है कि यह किसी की मदद करता है।

— Taian
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.