DataTables：未定義のプロパティスタイルを読み取れません

117

私はこのエラーを次のように受け取っています：

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>

また、columns.AdoptionTaskInfo.columnsと応答オブジェクトの配列が存在します。何が問題なのかをデバッグする方法がわかりません。提案があれば役立ちます。

javascript  jquery  node.js  datatables 
— ルーキー
ソース
2
.styleコードで探します。未定義の変数のプロパティにアクセスしようとしています。そこからデバッグできます。
— Jecoms 2016
80
フェッチしようとしている列の数が、作成した<th>の数と同じかどうかを確認します。
— matrixguy 2016
12
この問題の原因となるJavaScriptで定義された列数と列数が一致しません。
— Dhanuka777 2016年

回答:

283

問題は、<th>タグの数が構成の列の数（キー "columns"を持つ配列）と一致する必要があることです。指定された列よりも<th>タグの数が少ない場合、このわずかに不可解なエラーメッセージが表示されます。

（正しい答えはすでにコメントとして存在していますが、答えとして繰り返すので見つけやすくなりました-コメントが表示されませんでした）

— エレンクロナ
ソース
2
私は別のポイントを追加したいのですが、dataSrcを定義しない場合、jsonで「data」を使用すると、誰かが役立つと思うかもしれません。別の名前を使用すると、このエラーが発生します。
— アーメドサニー
また、表示されないが検索やエディターなどの目的で含まれている列がある場合、それらは列の最後にある必要があります：[]リスト。
— Tim Dearborn
24

考えられる原因

  • thテーブルのヘッダーまたはフッターの要素の数が、テーブルの本体の列の数と異なるか、columnsオプションを使用して定義されています。
  • 属性colspanはth、テーブルヘッダーの要素に使用されます。
  • columnDefs.targetsオプションで指定された列インデックスが正しくありません。

ソリューション

  • thテーブルのヘッダーまたはフッターの要素の数が、columnsオプションで定義された列の数と一致していることを確認してください。
  • colspanテーブルヘッダーで属性を使用する場合は、少なくとも2つのヘッダー行とth各列に1つの一意の要素があることを確認してください。詳細については、複合ヘッダーを参照してください。
  • columnDefs.targetsオプションを使用する場合は、ゼロベースの列インデックスが既存の列を参照していることを確認してください。

リンク

詳細については、jQuery DataTables：一般的なJavaScriptコンソールエラー-TypeError：undefinedのプロパティ 'style'を読み取れませんを参照してください。

— Gyrocode.com
ソース
13

あなたはどんな提案も役立つと言ったので、現在私はDataTablesの「未定義のプロパティ 'スタイル'を読み取れません」問題を解決しましたが、私の問題は基本的にデータテーブル開始フェーズの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」を使用します：[7]、それでエラーになります。インデックス7の列は存在しません。legacy.datatables.net
— usage /
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]がundefined/ ではないことを確認してくださいnull。

その場合は、「」に置き換えてください。

— デビッドI.サムディオ
ソース
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

おかしなことに、1組のペアが多すぎるために次のエラーが発生しましたが、それでも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)
— トマス・ゲーテ
ソース
0

私の場合、サーバー側のデータテーブルを2回更新していたため、このエラーが発生しました。それが誰かを助けることを願っています。

— 泰安
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.