데이터 테이블 : 정의되지 않은 '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를 확인하여 현재 어느 열에 있는지 확인할 수 있습니다. 그러면 해당 열과 다른 열의 차이점을 파악할 수 있습니다. 희망이 도움이됩니다!
이것은 '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>
데 <thead>와 <tbody>동일한 번호 <th>와 <td>내 문제를 해결했다.
이것이 발생하는 또 다른 이유는 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요구에 맞게.
내 경우에는 헤더없이 테이블을 사용하면이 오류가 발생했습니다.
<thead>
<tr>
<th>example</th>
</tr>
</thead>
팁 1 :
당신이 몇 가지 아이디어를 얻을이 링크를 참조하십시오 :
팁 2 :
다음 사항이 올바른지 확인하십시오.
- Jquery Vesion을 확인하십시오
- 당신의 versiion 확인하시기 바랍니다 CDN 또는 해당 지역의 데이터 테이블 관련 ℃와 pH 5.5 또는 다른 pH 및 CSS 파일을
- 테이블이있는
<thead></thead>및<tbody></tbody>태그 - 표 머리글 열 길이와 본문 열 길이
style='display:none'동일한 성질을 가진 일부 cloumn을 사용하면 머리 와 몸 모두에 적용됩니다.- 테이블 열이 비어 있지 않은 경우 [Null,-, NA, Nil]
- 당신의 테이블은
<td>, <tr>문제없이 잘 하나입니다
위의 답변과 약간 다른 문제가 있습니다. 나에게 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'
]
});
필자의 경우 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();
불일치 및 숫자 외에도 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();
});**
마지막 일에 colspan을 추가하려고 할 때 같은 오류가 발생했습니다.
<table>
<thead>
<tr>
<th> </th> <!-- column 1 -->
<th colspan="2"> </th> <!-- column 2&3 -->
</tr>
</thead>
<tbody>
<tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
</tr>
</tbody>
</table>
tr 끝에 숨겨진 열을 추가하여 문제를 해결했습니다.
<thead>
<tr>
<th> </th> <!-- column 1 -->
<th colspan="2"> </th> <!-- column 2&3 -->
<!-- hidden column 4 for proper DataTable applying -->
<th style="display: none"></th>
</tr>
</thead>
<tbody>
<tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<!-- hidden column 4 for proper DataTable applying -->
<tr style="display: none"></tr>
</tr>
</tbody>
이에 대한 설명은 어떤 이유로 DataTable을 마지막 일에 colspan이있는 테이블에 적용 할 수 없지만 colspan이 중간에 사용되는 경우 적용 할 수 있다는 것입니다.
이 솔루션은 약간 해 키지 만 내가 찾은 다른 솔루션보다 간단하고 짧습니다.
나는 그것이 누군가를 도울 수 있기를 바랍니다.
<thead>열 머리글과 행에 행을 줄 바꿈해야합니다 <tbody>. 또한 일치하는 번호가 있는지 확인하십시오. 에 대한 열 헤더 <th>수td
aoColumns 필드에 의해 발생했을 수 있습니다. 여기에 명시된 바와 같이
aoColumns : 지정된 경우이 배열의 길이는 원본 HTML 테이블의 열 수와 같아야합니다. 기본값과 자동 감지 옵션 만 사용하려면 '널'을 사용하십시오.
그런 다음 테이블 열에서와 같이 필드를 추가해야합니다
...
aoColumnDefs: [
null,
null,
null,
{ "bSortable": false },
null,
],
...
"솔루션"을 찾았습니다.
이 코드는 작동하지 않습니다 :
<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을 가질 수 없다는 것입니다.
참고 URL : https://stackoverflow.com/questions/25377637/datatables-cannot-read-property-mdata-of-undefined
'IT' 카테고리의 다른 글
| Android에서 기본 활동으로 데이터 전송 (0) | 2020.03.25 |
|---|---|
| 객체 길이를 얻는 방법 (0) | 2020.03.24 |
| CSS 만 사용하여 div 위에 마우스를 올려 놓으십시오. (0) | 2020.03.24 |
| 안드로이드 앱에서 Toolbar.setTitle 메소드는 효과가 없습니다 – 어플리케이션 이름은 제목으로 표시됩니다 (0) | 2020.03.24 |
| 배열을 SimpleXML로 변환하는 방법 (0) | 2020.03.24 |