데이터 테이블 : 정의되지 않은 '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]
    }],
  });
});

참고로 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>

하나 <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>

colspan은 있지만 두 번째 행은없는 잘 구성된 thead를 사용할 때도 오류가 나타납니다.

7 열이있는 테이블의 경우 다음이 작동하지 않으며 자바 스크립트 콘솔에서 "정의되지 않은 '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>에는 마지막 세 열 (레코드 표시, 숨기기 및 삭제 링크가 포함 된)의 요소가 생략 됩니다. <th>내 요소의 열에 제목을 추가 <thead>하면 문제가 해결 되었다는 것을 알았습니다 .

귀하의 HTML을 볼 수 없기 때문에 이것이 동일한 문제인지 말할 수 없습니다. 동일한 문제가 아닌 경우 크롬 디버거를 사용하여 콘솔에서 오류를 클릭 한 다음 (오류가 발생한 코드로 이동) 조건부를 추가하여 오류가 발생한 열을 파악할 수 있습니다. 중단 점 ( 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>

이것이 발생하는 또 다른 이유는 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>

당신은 당신을 제거해야 colspan와의 수 th 와 td요구에 맞게.

팁 1 :

몇 가지 아이디어를 얻을 수있는이 링크를 참조하십시오.

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

팁 2 :

다음 사항이 올바른지 확인하십시오.

• Jquery Vesion을 확인하십시오
• 당신의 versiion 확인하시기 바랍니다 CDN 또는 해당 지역의 데이터 테이블 관련 ℃와 pH 5.5 또는 다른 pH 및 CSS 파일을
• 테이블이있는 <thead></thead>및 <tbody></tbody>태그
• 표 머리글 열 길이와 본문 열 길이
• style='display:none'동일한 특성으로 일부 cloumn을 사용하면 머리글과 본문 모두에 적용됩니다.
• 테이블 열이 비어 있지 않은 경우 [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>

이에 대한 설명은 어떤 이유로 DataTable을 마지막 일에 colspan이있는 테이블에 적용 할 수 없지만 colspan이 중간에 사용되는 경우 적용 할 수 있다는 것입니다.

이 솔루션은 약간 해 키지 만 내가 찾은 다른 솔루션보다 간단하고 짧습니다.

나는 그것이 누군가를 도울 수 있기를 바랍니다.

위의 답변과 약간 다른 문제가 있습니다. 나에게 HTML 마크 업은 괜찮 았지만 자바 스크립트의 열 중 하나가 누락되어 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'
                            ]
                        });

불일치 및 숫자 외에도 datatable scripts 열 부분에서 누락 된 항목으로 인해이 문제가 발생할 수도 있습니다. 내 데이터 테이블 검색 창을 수정했습니다.

이 부분에 대해 이야기하고 있습니다.

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

이 부분이 전체 총 개수보다 "널"이 적을 때까지이 오류로 어려움을 겪었습니다.

이것은 .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으로 재설정하는 선택된 플러그인 사용)를 사용하면 이 오류가 발생하여 며칠 동안 희망이없는 모든 것을 시도했습니다. 문제는 코드 뒤에 내 드롭 다운 코드가 다음과 같고 선택한 그리드 행에 해당 동작을 적용하기 위해 값을 두 번 선택하면 해당 오류가 발생한다는 것입니다. 나는 며칠 동안 자바 스크립트 문제라고 생각했고 (다시 필자의 경우) 업데이트는 업데이트 프로세스에서 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();

<thead>열 머리글과 행에 행을 줄 바꿈해야합니다 <tbody>. 또한 일치하는 번호가 있는지 확인하십시오. 에 대한 열 헤더 <th>수td

aoColumns 필드에 의해 발생했을 수 있습니다. 여기에 명시된 바와 같이

aoColumns : 지정된 경우이 배열의 길이는 원본 HTML 테이블의 열 수와 같아야합니다. 기본값과 자동으로 감지 된 옵션 만 사용하려면 '널'을 사용하십시오.

그런 다음 테이블 열에서와 같이 필드를 추가해야합니다

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

내 경우에는이 오류의 원인은 복사 붙여 넣기 테이블 코드 습관으로 인해 다른 테이블 구조와 동일한 ID 이름을 가진 2 개의 테이블이 있다는 것입니다. 각 테이블마다 다른 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을 가질 수 없다는 것입니다.