데이터 테이블: 정의되지 않은 속성 '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 데이터 표에는 올바른 형식의 표가 필요합니다.다음을 포함해야 합니다.<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>
(열 수가 일치해야 하는) 다음 코드는 작동하지만,
<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과 함께 잘 형성된 광고를 사용하지만 두 번째 행은 사용하지 않을 때도 나타납니다.
7개의 열이 있는 테이블의 경우 다음이 작동하지 않으며 Javascript 콘솔에 "Cannot read property 'mData of undefined"가 표시됩니다.
<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>
하고 있다<thead>그리고.<tbody> 은같수로<th>그리고.<td>내 문제를 해결했습니다.
Scape Generator를 통해 생성된 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>
이러한 현상이 발생하는 또 다른 이유는 데이터 테이블 초기화의 열 매개 변수 때문입니다.
열 수가 헤더와 일치해야 합니다.
"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>
팁 1:
이 링크를 참조하면 아이디어를 얻을 수 있습니다.
팁 2:
다음 사항이 올바른지 확인합니다.
- Jquery Vession을 확인하십시오.
- CDN 버전 또는 로컬 데이터 테이블 관련 .min 및 css 파일을 확인하십시오.
- 의 테이블에는 테은블이의가 .
<thead></thead>&<tbody></tbody>꼬리표 - 표 머리글 열 길이가 본문 열 길이와 같습니다.
- 에서 개몇열사에서 일부 칼럼을 것.
style='display:none'헤더와 본문 모두에 동일한 속성이 적용됩니다. - 테이블 열이 비어 있지 않으면 [Null, --, NA, Nil]과 같은 것을 사용합니다.
- 은 당신테은없것다가 없는 .
<td>, <tr>을 내다
당신은 당신의 것을 제거해야 합니다.colspan 및의의 수.th그리고.td일치해야 합니다.
마지막에 colspan을 추가하려고 할 때 동일한 오류가 발생했습니다.
<table>
<thead>
<tr>
<th> </th> <!-- column 1 -->
<th colspan="2"> </th> <!-- column 2&3 -->
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</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>
<td> </td>
<td> </td>
<td> </td>
<!-- hidden column 4 for proper DataTable applying -->
<td style="display: none"></td>
</tr>
</tbody>
이에 대한 설명은 어떤 이유에서인지 DataTable을 마지막 colspan이 있는 테이블에 적용할 수 없지만 colspan이 중간에 사용되는 경우 적용할 수 있습니다.
이 해결책은 약간 진부하지만, 제가 찾은 다른 어떤 해결책보다 간단하고 짧습니다.
그것이 누군가에게 도움이 되기를 바랍니다.
나의 경우 헤더가 없는 테이블을 사용하면 이 오류가 발생했습니다.
<thead>
<tr>
<th>example</th>
</tr>
</thead>
비슷한 오류가 발생하고 있습니다.문제는 헤더 라인이 정확하지 않다는 것입니다.제가 아래의 헤더 라인을 실행했을 때, 제가 가지고 있던 문제가 해결되었습니다.
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th colspan="6">Common Title</th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
위에 제시된 답변과 저에게는 약간 다른 문제입니다.저는 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>태그. 제 칼럼에 링크와 이미지 태그가 많이 들어 있어서 한동안 눈치채지 못했던 이 작은 실수를 제외하고는 모든 것이 일치했습니다.
.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();
});**
그리드 보기를 사용하여 웹 양식에서 작업하는 사용자:
모세의 대답은 전적으로 옳습니다.을 생성하고 하만우테생을있성고때문에기하이리블가지.thead태그는 기본적으로 생성되지 않습니다.그래서 문제를 해결하기 위해 추가합니다.[YourGridViewID].HeaderRow.TableSection = TableRowSection.TableHeader로, 에 있습니다DataBind()메서드 호출(사용 중인 경우).은 " " " 를 합니다.HeaderText을 그드 보서 합니다.th는 태는내부생다니성됩서에그 합니다.thead.
저의 경우, ASP.NET GridView, UpdatePanel 및 DropDownList(Javascript 라인을 사용하여 값을 0으로 재설정한 Choen 플러그인 포함)를 사용하여 이 오류를 발견하고 며칠 동안 모든 것을 시도했지만 희망이 없었습니다.문제는 코드 뒤에 있는 드롭다운 코드가 다음과 같았고 선택한 그리드 행에 해당 작업을 적용하기 위해 값을 두 번 선택하면 해당 오류가 발생합니다.저는 며칠 동안 자바스크립트 문제라고 생각했는데(저의 경우도 마찬가지입니다), 결국 수정은 업데이트 프로세스에서 드로우다운 값을 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>꼬리표
누군가에게 도움이 된다면 여기 제 코드 스니펫이 있습니다.
//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"이 하나 적다는 지적을 받을 때까지 이 오류와 씨름했습니다.
제 경우 이 오류의 원인은 테이블 코드를 복사하는 습관 때문에 테이블 구조가 다른 동일한 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>은 행을 당신행포합니다야장해을로 묶어야 .<thead> 및 " " " 의 <tbody> 열 헤더의하는지 확인합니다.<th>이 하는 것처럼td
aoColumns 필드로 인해 발생할 수 있습니다.여기에 명시된 바와 같이
ao 열:지정할 경우 이 배열의 길이는 원래 HTML 테이블의 열 수와 같아야 합니다.기본값과 자동으로 탐지된 옵션만 사용하려는 경우 'null'을 사용합니다.
그런 다음 열 표에서와 같이 필드를 추가해야 합니다.
...
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
'programing' 카테고리의 다른 글
| 디렉토리가 Ruby와 함께 있지 않은 경우 디렉토리 만들기 (0) | 2023.06.06 |
|---|---|
| UI 내비게이션 컨트롤러에 오른쪽 버튼을 추가하는 방법은 무엇입니까? (0) | 2023.06.06 |
| 진행 대화 상자와 배경 스레드가 활성화되었을 때 화면 방향 변경을 처리하는 방법은 무엇입니까? (0) | 2023.06.06 |
| 당신은 C에서 리눅스에서 논블로킹 콘솔 I/O를 어떻게 합니까? (0) | 2023.06.06 |
| django 2.0의 경우 urls.py 의 path() 또는 url() 중 어느 것을 사용하는 것이 더 좋습니까? (0) | 2023.06.06 |