我正在使用Tabulator版本4.1.5,它没有渲染任何东西。这是我的代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tabulator 4 Test</title>
<link href="tabulator-master-415/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="tabulator-master-415/dist/js/tabulator.min.js"></script>
<script>
var tableData = [
{id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
{id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
]
var table = new Tabulator("#example-table", {
data:tableData, //set initial table data
columns:[
{title:"Name", field:"name"},
{title:"Age", field:"age"},
{title:"Gender", field:"gender"},
{title:"Height", field:"height"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob"},
{title:"Cheese Preference", field:"cheese"},
],
});
</script>
</head>
<body>
<h1>This is a test</h1>
<div id="example-table"></div>
</body>
</html>
该表不呈现。我做错了什么?
您的表构造函数在创建<div>
之前运行。所以当你的表构造函数代码执行时,目标div还不存在。
在表<script>
之后移动包含构造函数的<div>
块,或者将构造函数代码包装到window.onload
函数或类似的jQuery替代中。