Question

我有以下代码。我想知道为什么它以某种方式起作用而不是另一种方式。

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

Answer 1

在没有任何选项的情况下调用DataTables初始化程序时，它需要填充thead，以便它可以尝试检测列及其属性。

在你的thead中添加至少一个<th>元素，然后注释的代码就可以了。

未注释的行确实正在工作。在javascript运行时，该元素尚未存在于页面上！所以选择器抓取0个元素并且初始化器没有真正运行，因此没有错误。

或者（和我首选的初始化DT的方法）...给初始化器一个列定义数组。

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

奇怪的jQuery DataTables初始化行为

1 个答案: