データテーブル：未定義のプロパティ '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]
    }],
  });
});

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>

詳細はこちらをご覧ください

の一般的な原因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>

で、次のコードしながら1つの<th>あたり<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>

このエラーは、2行目を含まない、整形式の広告を使用する場合にも表示されます。

列が7つあるテーブルの場合、以下は機能せず、JavaScriptコンソールに「未定義のプロパティ '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>

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

HTMLが表示されないので、これが同じ問題かどうかはわかりません。同じ問題ではない場合は、Chromeデバッガーを使用して、コンソールでエラーをクリックすることにより、エラーが発生している列を特定し（エラーが発生しているコードに移動します）、条件を追加します。ブレークポイント（でcol==undefined）。停止したら、変数iをチェックして、現在その列がどの列にあるかを確認できます。これは、その列が他の列と何が違うかを理解するのに役立ちます。お役に立てば幸いです。

た<thead>と<tbody>の同じ番号を持つ<th>と<td>私の問題を解決しました。

これは'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>

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

列の数はヘッダーと一致する必要があります

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

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

ヒント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>問題のないものです

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

              <thead>
                   <tr>
                       <th>example</th>
                  </tr>
              </thead>

最後の列に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>

その説明は、何らかの理由で最後のthでcolspanを持つテーブルにDataTableを適用できませんが、途中のthでcolspanが使用されている場合は適用できます。

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

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

上記の回答とは少し異なる問題が私にはあります。私にとって、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>

動的に生成されましたが、タイプミスのある不適切な形式のテーブルがありました。誤って<td>タグを別のタグの中にコピーしました<td>。列数が一致しました。私が持っていた<thead>と<tbody>タグ。私の列には多くのリンクとイメージタグが含まれていたため、しばらくの間気づかなかったこの小さな間違いを除いて、すべてが一致しました。

同じ問題が発生しましたが、テーブルを動的に生成していました。私の場合、テーブルが欠けていて<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'
                            ]
                        });

一貫性のない数値に加えて、データテーブルスクリプトの列部分内にアイテムが欠落している場合も、これが発生する可能性があります。データテーブルの検索バーを修正しました。

この部分について話している。

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

この部分の「null」が私の合計の広告数よりも1つ少ないことが指摘されるまで、私はこのエラーに苦労しました。

これは私を狂わせました-.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();
});**

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

  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();

<thead>列ヘッダーと行の行を折り返す必要があり<tbody>ます。また、一致する番号がないことを確認してください。列ヘッダー<th>のtd

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

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

次に、テーブルの列のようにフィールドを追加する必要があります

...
aoColumnDefs: [
    null,
    null,
    null,
    { "bSortable": false },
    null,
],
...

私の場合、このエラーの原因は、コピーと貼り付けのテーブルコードの習慣があるため、2つのテーブルに同じID名があり、テーブル構造が異なることです。各テーブルに異なるIDがあることを確認してください。

<table id="tabel_data">
    <thead>
        <tr>
            <th>heading 1</th>
            <th>heading 2</th>
            <th>heading 3</th>
            <th>heading 4</th>
            <th>heading 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data-1</td>
            <td>data-2</td>
            <td>data-3</td>
            <td>data-4</td>
            <td>data-5</td>
        </tr>
    </tbody>
</table>

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

「解決策」を見つけました。

このコードは機能しません：

<table>
<thead>
    <tr>
        <th colspan="3">Test</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody>

しかし、これは問題ありません：

<table>
<thead>
    <tr>
        <th colspan="2">Test</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody>

問題は、最後のTHが属性colspanを持つことができないことだと思います。