奇怪的jQuery數據表初始化行爲

我有以下代碼。我想知道爲什麼它以一種方式工作，而不是另一種。奇怪的jQuery數據表初始化行爲

<!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>

它給了我下面的錯誤，如果我取消這標誌着我不工作，並排除工作單線上的塊。

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，然後評論的代碼將工作。

未註釋的行不是真的正在工作。在JavaScript運行的時候，頁面上還沒有該元素！所以選擇器抓取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數據表初始化行爲

回答

相關問題