에 문제가 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요구에 맞게.
