이상한 jQuery DataTables 초기화 동작

다음 코드가 있습니다. 그리고 왜 그것이 한 방향으로 작용하지만 다른 방향으로 작용하지 않는지 궁금합니다.이상한 jQuery DataTables 초기화 동작

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"/> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
<meta name="viewport" content="width=device-width, initial-scale=1"/> 
<title>Chart</title> 
<link href="./css/jquery.dataTables.min.css" rel="stylesheet"/> 
<script src="./js/jquery-3.1.0.min.js"></script> 
<script src="./js/jquery.dataTables.min.js"></script> 
<script> 
/* 
// THIS BLOCK DOES NOT WORK 
var tbldata; 

$(document).ready 
(
     function() 
     { 
       tbldata = $("#tbldata").DataTable(); 
     } 
); 
*/ 

// THIS SINGLE LINE WORKS 
var tbldata = $("#tbldata").DataTable(); 
</script> 
</head> 
<body> 
     <div> 
       <table id="tbldata"> 
         <thead></thead> 
         <tbody></tbody> 
       </table> 
     </div> 
</body> 
</html>

작동하지 않는 것으로 표시된 블록의 주석을 제거하고 작동하는 한 줄을 주석 처리하면 다음과 같은 오류가 발생합니다. 옵션없이 DataTables 이니셜 라이저를 호출 할 때

jQuery.Deferred exception: Cannot read property 'aDataSort' of undefined TypeError: Cannot read property 'aDataSort' of undefined 
    at V (http://192.168.33.10:5000/static/js/jquery.dataTables.min.js:65:443) 
    at va (http://192.168.33.10:5000/static/js/jquery.dataTables.min.js:70:61) 
    at HTMLTableElement.<anonymous> (http://192.168.33.10:5000/static/js/jquery.dataTables.min.js:91:148) 
    at Function.each (http://192.168.33.10:5000/static/js/jquery-3.1.0.min.js:2:2815) 
    at r.each (http://192.168.33.10:5000/static/js/jquery-3.1.0.min.js:2:1003) 
    at r.m [as dataTable] (http://192.168.33.10:5000/static/js/jquery.dataTables.min.js:82:388) 
    at r.h.fn.DataTable (http://192.168.33.10:5000/static/js/jquery.dataTables.min.js:166:245) 
    at HTMLDocument.<anonymous> (http://192.168.33.10:5000/static/test.html:30:45) 
    at j (http://192.168.33.10:5000/static/js/jquery-3.1.0.min.js:2:29568) 
    at k (http://192.168.33.10:5000/static/js/jquery-3.1.0.min.js:2:29882) undefined

출처

2016-09-21 shinkou

는 지금까지 내가 아는 한, 당신은 댓글을 달았 블록이 작동해야하며, 한 줄이 작동하지 않아야합니다. 이 주위의 다른 방법은 ** 이상한 ** –

, 그것은 인구 thead은 그래서 열 및 해당 속성을 감지하기 위해 시도 할 수 있습니다 기대하고있다.

적어도 하나의 <th> 요소를 thead에 추가하면 주석 처리 된 코드가 작동합니다.

주석 처리되지 않은 행은 이 아니며 실제로는 일합니다. 자바 스크립트가 실행되는 시점에서 요소는 아직 페이지에 존재하지 않습니다! 따라서 선택기는 0 요소를 가져오고 이니셜 라이저는 실제로 실행되지 않으므로 오류가 발생하지 않습니다.

대체적으로 (그리고 대부분의 경우 DT를 초기화하는 선호되는 방법) ... 이니셜 라이저에 열 정의 배열을 지정하십시오.

는

$('#mytable').DataTable({ 
    columns: [{ title: 'First Name', data: 'FirstName' }] //etc, etc... 
})

출처

2016-09-21 14:25:32 BLSully

맞을지도 모릅니다 ... OP –

이이 문제에 더 빨리 직면 할 때까지 기다리십시오. 네, 맞습니다. 어떤 컬럼도없이 초기화 테이블이 작동해서는 안됩니다 ...하지만 한 줄이 작동하는 이유는 여전히 같습니다! 왜 그걸 깨뜨리지 않는거야? –

나는 내 대답의 마지막 단락에서 설명했다. 그것은/실제로 작동하지 않습니다, 그것은 단지 오류를 던지고 있지 않습니다. 요소가 존재하기 전에 JS가 실행 중입니다. 선택기는 DataTable 이니셜 라이저가 실행되지 않도록 제로 요소를 선택합니다. Ergo, 오류가 없습니다. – BLSully

이상한 jQuery DataTables 초기화 동작

답변

관련 문제