web-dev-qa-db-ja.com

データテーブル：未定義のプロパティ 'mData'を読み込めません

Datatablesに問題があります。また、 このリンク を実行しても結果は得られませんでした。データをDOMに直接解析するための前提条件をすべてまとめました。この問題を解決するために私を助けてください。

スクリプト 

$(document).ready(function() {
  $('.viewCentricPage .teamCentric').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bPaginate": false,
    "bFilter": true,
    "bSort": true,
    "aaSorting": [
      [1, "asc"]
    ],
    "aoColumnDefs": [{
      "bSortable": false,
      "aTargets": [0]
    }, {
      "bSortable": true,
      "aTargets": [1]
    }, {
      "bSortable": false,
      "aTargets": [2]
    }],
  });
});
jqueryconsoledatatables
258
Thriveni

FYI dataTables は整形式の表を必要とします。それは<thead>と<tbody>タグを含まなければなりません、さもなければそれはこのエラーを投げます。また、ヘッダー行を含むすべての行が同じ列数であることを確認してください。

以下はエラーになります（<thead>タグと<tbody>タグはありません）

<table id="sample-table">
    <tr>
        <th>title-1</th>
        <th>title-2</th>
    </tr>
    <tr>
        <td>data-1</td>
        <td>data-2</td>
    </tr>
</table>

以下もエラーになります（列数が等しくない）

<table id="sample-table">
    <thead>
        <tr>
            <th>title-1</th>
            <th>title-2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data-1</td>
            <td>data-2</td>
            <td>data-3</td>
        </tr>
    </tbody>
</table>

より多くの情報のために ここでもっと読みなさい

543
Moses Machua

Cannot read property 'fnSetData' of undefinedの一般的な原因は、次の誤ったコードのように、一致しない列数です。

<thead>                 <!-- thead required -->
    <tr>                <!-- tr required -->
        <th>Rep</th>    <!-- td instead of th will also work -->
        <th>Titel</th>
                        <!-- th missing here -->
    </tr>
</thead>
<tbody>
    <tr>
        <td>Rep</td>
        <td>Titel</td>
        <td>Missing corresponding th</td>
    </tr>
</tbody>

次の<th>ごとに1つの<td>（列数が一致する必要がある）を含むコードは機能しますが、

<thead>
    <tr>
        <th>Rep</th>       <!-- 1st column -->
        <th>Titel</th>     <!-- 2nd column -->
        <th>Added th</th>  <!-- 3rd column; th added here -->
    </tr>
</thead>
<tbody>
    <tr>
        <td>Rep</td>             <!-- 1st column -->
        <td>Titel</td>           <!-- 2nd column -->
        <td>th now present</td>  <!-- 3rd column -->
    </tr>
</tbody>

このエラーは、colspanで2行目なしで整形式のtheadを使用した場合にも発生します。

7列のテーブルでは、次のようには動作せず、JavaScriptコンソールに「undefinedのプロパティ 'mData'を読み取れません」と表示されます。

<thead>
    <tr>
        <th>Rep</th>
        <th>Titel</th>
        <th colspan="5">Download</th>
    </tr>
</thead>

これが動作している間：

<thead>
    <tr>
        <th rowspan="2">Rep</th>
        <th rowspan="2">Titel</th>
        <th colspan="5">Download</th>
    </tr>
    <tr>
        <th>pdf</th>
        <th>nwc</th>
        <th>nwctxt</th>
        <th>mid</th>
        <th>xml</th>
    </tr>
</thead>
72
PaulH

Scaffoldジェネレータを介して作成されたRailsビューでDOMデータを使用しても同じ問題がありました。デフォルトでは、ビューは最後の3列（レコードの表示、非表示、破棄へのリンクを含む）の<th>要素を省略します。 <th>内の<thead>要素にそれらの列のタイトルを追加すれば、問題が解決することがわかりました。

私はあなたのHTMLを見ることができないので、これがあなたが抱えているのと同じ問題であるかどうか私は言うことができません。同じ問題ではない場合は、コンソールでエラーをクリックして（エラーになっているコードに移動して）、どの列でエラーが発生しているのかを調べるためにクロムデバッガを使用できますブレークポイント（col==undefined）停止したら、変数iを調べて、現在どの列にあるのかを確認できます。その列の他の部分との相違点を理解するのに役立ちます。お役に立てば幸いです。

debugging mData error

36
Nathan Hanna

これは、'aoColumns':[..]のように正しい列数と一致しないものに対するテーブル引数がある場合にも発生する可能性があります。このような問題は、他のページから貼り付けコードをコピーしてデータテーブルの統合をすばやく開始するときによく発生します。

例：

これはうまくいきません。

<table id="dtable">
    <thead>
        <tr>
            <th>col 1</th>
            <th>col 2</th>
        </tr>
    </thead>
    <tbody>
        <td>data 1</td>
        <td>data 2</td>
    </tbody>
</table>
<script>
        var dTable = $('#dtable');
        dTable.DataTable({
            'order': [[ 1, 'desc' ]],
            'aoColumns': [
                null,
                null,
                null,
                null,
                null,
                null,
                {
                    'bSortable': false
                }
            ]
        });
</script>

しかしこれはうまくいくでしょう：

<table id="dtable">
    <thead>
        <tr>
            <th>col 1</th>
            <th>col 2</th>
        </tr>
    </thead>
    <tbody>
        <td>data 1</td>
        <td>data 2</td>
    </tbody>
</table>
<script>
        var dTable = $('#dtable');
        dTable.DataTable({
            'order': [[ 0, 'desc' ]],
            'aoColumns': [
                null,
                {
                    'bSortable': false
                }
            ]
        });
</script>
26
DrewT

これが発生するもう1つの理由は、DataTable初期化のcolumnsパラメータが原因です。

列数はヘッダと一致しなければならない 

"columns" : [ {
                "width" : "30%"
            }, {
                "width" : "15%"
            }, {
                "width" : "15%"
            }, {
                "width" : "30%"
            } ]

7列ありました

<th>Full Name</th>
<th>Phone Number</th>
<th>Vehicle</th>
<th>Home Location</th>
<th>Tags</th>
<th>Current Location</th>
<th>Serving Route</th>
10
Siddharth

colspanを削除する必要があり、thとtdの数は一致する必要があります。

8
Francisco Balam

私の場合、このエラーは私がヘッダなしでテーブルを使用している場合に発生しました

              <thead>
                   <tr>
                       <th>example</th>
                  </tr>
              </thead>
6
Asad

ヒント1：

このリンクを参照すると、いくつかのアイデアが得られます。

https://datatables.net/forums/discussion/20273/uncaught-typeerror-cannot-read-property-mdata-of-undefined

ヒント2：

以下が正しいことを確認してください。

  • Jquery Vesionを確認してください。
  • あなたのバージョンをチェックしてください _ cdn _ またはあなたのローカルデータテーブルに関連する .min＆cssファイル
  • あなたのテーブルは<thead></thead>と<tbody></tbody>タグを持っています
  • あなたのテーブル ヘッダ 列の長さは ボディ 列の長さと同じです
  • style='display:none'内のいくつかの用語を同じ性質として使用することは、ヘッダーと本文の両方に当てはまります。
  • テーブルの列は空ではありません。 [Null、 - 、NA、Nil] のように使用してください。
  • あなたのテーブルは<td>, <tr>問題のないものです
4
venkatSkpi

私は動的に生成されたがタイプミスのあるひどく形成されたテーブルを持っていました。間違って別の<td>の中に<td>タグをコピーしました。列数が一致しました。 <thead>タグと<tbody>タグがありました。私のコラムにはたくさんのリンクと画像タグが入っていたので、しばらくの間気付かなかったこの小さな間違いを除いて、すべてが一致した。

3
Peter Szalay

上記の答えとは私のためにわずかに異なる問題。私にとっては、HTMLマークアップは問題ありませんでしたが、JavaScriptの私のコラムの1つが欠けていて、HTMLと一致しませんでした。

すなわち.

<table id="companies-index-table" class="table table-responsive-sm table-striped">

                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Created at</th>
                                <th>Updated at</th>
                                <th>Count</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($companies as $company)
                                <tr>
                                    <td>{{ $company->id }}</td>
                                    <td>{{ $company->name }}</td>
                                    <td>{{ $company->created_at }}</td>
                                    <td>{{ $company->updated_at }}</td>
                                    <td>{{ $company->count }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

私のスクリプト： - 

<script>
        $(document).ready(function() {
            $('#companies-index-table').DataTable({
                serverSide: true,
                processing: true,
                responsive: true,
                    ajax: "{{ route('admincompanies.datatables') }}",
                columns: [
                    { name: 'id' },
                    { name: 'name' },
                    { name: 'created_at' },
                    { name: 'updated_at' },     <-- I was missing this line so my columns didn't match the thead section.
                    { name: 'count', orderable: false },
                ],
            });
        });
    </script>
3
Paul Wright

私は同じ問題に遭遇しましたが、私はテーブルを生成していました 動的に 。私の場合、テーブルに<thead>タグと<tbody>タグがありません。

それが誰かを助けたなら、ここに私のコードスニペットがあります

   //table string
   var strDiv = '<table id="tbl" class="striped center responsive-table">';

   //add headers
   var strTable = ' <thead><tr id="tableHeader"><th>Customer Name</th><th>Customer Designation</th><th>Customer Email</th><th>Customer Organization</th><th>Customer Department</th><th>Customer ContactNo</th><th>Customer Mobile</th><th>Cluster Name</th><th>Product Name</th><th> Installed Version</th><th>Requirements</th><th>Challenges</th><th>Future Expansion</th><th>Comments</th></tr> </thead> <tbody>';


  //add data
  $.each(data, function (key, GetCustomerFeedbackBE) {
                            strTable = strTable + '<tr><td>' + GetCustomerFeedbackBE.StrCustName + '</td><td>' + GetCustomerFeedbackBE.StrCustDesignation + '</td><td>' + GetCustomerFeedbackBE.StrCustEmail + '</td><td>' + GetCustomerFeedbackBE.StrCustOrganization + '</td><td>' + GetCustomerFeedbackBE.StrCustDepartment + '</td><td>' + GetCustomerFeedbackBE.StrCustContactNo + '</td><td>' + GetCustomerFeedbackBE.StrCustMobile + '</td><td>' + GetCustomerFeedbackBE.StrClusterName + '</td><td>' + GetCustomerFeedbackBE.StrProductName + '</td><td>' + GetCustomerFeedbackBE.StrInstalledVersion + '</td><td>' + GetCustomerFeedbackBE.StrRequirements + '</td><td>' + GetCustomerFeedbackBE.StrChallenges + '</td><td>' + GetCustomerFeedbackBE.StrFutureExpansion + '</td><td>' + GetCustomerFeedbackBE.StrComments + '</td></tr>';
                        });

//add end of tbody
 strTable = strTable + '</tbody></table>';

//insert table into a div                 
   $('#divCFB_D').html(strDiv);
   $('#tbl').html(strTable);


    //finally add export buttons 
   $('#tbl').DataTable({
                            dom: 'Bfrtip',
                            buttons: [
                                'copy', 'csv', 'Excel', 'pdf', 'print'
                            ]
                        });
2
Hitesh Sahu

私の場合は、ASP.NET GridView、UpdatePanel、およびDropDownList（Javascript行を使用して値をゼロにリセットする）を使用した場合、 このエラーが発生し、何もせずにすべてを試しました。問題は、分離コードのドロップダウンのコードが次のようになっていて、選択したグリッド行にそのアクションを適用するために値を2回選択したときに、そのエラーが発生することです。私は何日もJavascriptの問題だと思っていましたが（これも私の場合ですが）、最終的には更新プロセスでdrowpdownの値に0を与えて修正しました。

  private void ddlTasks_SelectedIndexChanged(object sender, System.EventArgs e)
  {
     if (ddlTasks.SelectedValue != 0) {
        ChangeStatus(ddlTasks.SelectedValue);
        ddlTasks.SelectedValue = "0"; //// **This fixed my issue**
     }

     dvItemsGrid.DataSource = CreateDatasource();
     dvItemsGrid.DataBind();
     dvItemsGrid.UseAccessibleHeader = true;
     dvItemsGrid.HeaderRow.TableSection = TableRowSection.TableHeader;

  }

これは私のせいだった： 

     $('#<%= DropDownList.ClientID%>').val('0').trigger("chosen:updated").chosen();
1
hsobhy

矛盾と数に加えて、データ化可能なスクリプトのカラム部分の中に欠けている項目がこれも引き起こします。それを修正して私のdatatables検索バーを修正しました。

私はこの部分について話しています。

"columns": [
  null,
  .
  .
  .
  null
           ],

私はこの部分が私の合計theadカウントより1つ少ない "null"を持つことが指摘されるまで私はこのエラーに苦しんでいました。

1
Ege Bayrak

<thead>と<tbody>を同じ数の<th>と<td>にすることで私の問題は解決しました。

0
Masoud Darvishian

これは私を狂わせた - .NET MVCビューでDataTableを正常にレンダリングする方法。これはうまくいった：

 **@model List<Student>
 @{
    ViewData["Title"] = "Index";
}
 <h2>NEW VIEW Index</h2>
 <table id="example" class="display" style="width:100%">
   <thead>
   <tr>
   <th>ID</th>
    <th>Firstname</th>
    <th>Lastname</th> 
  </tr>
  </thead>
  <tbody>
@foreach (var element in Model)
{
    <tr>
    <td>@Html.DisplayFor(m => element.ID)</td>
    <td>@Html.DisplayFor(m => element.FirstName)</td>
    <td>@Html.DisplayFor(m => element.LastName)</td>
    </tr>

}
</tbody>
</table>**

JSファイル内のスクリプト：

**$(document).ready(function () {
    $('#example').DataTable();
});**
0
smac2020

AoColumnsフィールドによって発生している可能性があります。ここに述べたように

aoColumns：指定した場合、この配列の長さは元のHTMLテーブルの列数と等しくなければなりません。デフォルト値と自動的に検出されたオプションのみを使用したい場合は、 'null'を使用してください。

その後、テーブルColumnsのように項目を追加する必要があります。

...
aoColumnDefs: [
    null,
    null,
    null,
    { "bSortable": false },
    null,
],
...
0
Shah Muhammad Talha

最後のthにcolspanを追加しようとすると、同じエラーが発生しました

<table>
  <thead>
    <tr>    
      <th>&nbsp;</th> <!-- column 1 -->
      <th colspan="2">&nbsp;</th> <!-- column 2&3 -->
    </tr>
  </thead>

  <tbody>
    <tr>
      <tr>&nbsp;</tr>
      <tr>&nbsp;</tr>
      <tr>&nbsp;</tr>
    </tr>
  </tbody>
</table>

trの最後に非表示の列を追加して解決しました

<thead>
  <tr>    
    <th>&nbsp;</th> <!-- column 1 -->
    <th colspan="2">&nbsp;</th> <!-- column 2&3 -->

    <!-- hidden column 4 for proper DataTable applying -->
    <th style="display: none"></th> 
  </tr>
</thead>

<tbody>
  <tr>
    <tr>&nbsp;</tr>
    <tr>&nbsp;</tr>
    <tr>&nbsp;</tr>

    <!-- hidden column 4 for proper DataTable applying -->
    <tr style="display: none"></tr>
  </tr>
</tbody>

これに対する説明は、何らかの理由で、DataTableは最後のthでcolspanを持つテーブルに適用できないが、colspanが中間のthで使用される場合は適用できるということです。

このソリューションは少しハッキーですが、私が見つけた他のどのソリューションよりも簡単で短いものです。

それが誰かを助けることを願っています。

0
renkse

行を列ヘッダーには<thead>で、行には<tbody>で行を折り返す必要があります。また、一致する番号がないことを確認してください。 tdの場合と同じように、列ヘッダーのコード<th>

0
William