web-dev-qa-db-ja.com

DataTables：未定義のプロパティスタイルを読み取ることができません

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

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とレスポンスオブジェクトの配列も存在します。何が悪いのかデバッグする方法がわからない..どんな提案でも役立つでしょう..

javascriptjquerynode.jsdatatables
78
Rookie

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

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

206
ehrencrona

あなたはどんな提案も役に立つだろうと言ったので、現在私は私のDataTablesの "未定義のプロパティ 'style'を読めない"問題を解決したが、私の問題は基本的にデータテーブル開始フェーズの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
        ]
    });
11
Bahadir Tasdemir

テーブルヘッダに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>

すべてうまくいった。

8
JustLearning

入力データのresponse[i]とresponse[i][j]が、undefined/nullではないことを確認してください。

そうであれば、それらを ""に置き換えてください。

4
David I. Samudio

新しい（他の）テーブルを描くときにも起こります。私は最初に前のテーブルを削除することでこれを解決しました：

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

2
Guest

考えられる原因

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

解決策

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

リンク集

jQuery DataTables：一般的なJavaScriptコンソールエラー-TypeError：未定義のプロパティ「スタイル」を読み取れません を参照してください。

2
Gyrocode.com

解決策はとても簡単です。

  <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：columns.AdoptionTaskInfo.columnsには少なくともテーブルヘッドで定義されていない列があります

0
Stanley Okpala Nwosa

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

0
Taian