Question

我正在尝试使用 Tabulator 版本 4.1.5

2019-01-07

1955

tabulator

我使用的是 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>

表格没有渲染。我做错了什么？

Answer 1

您的表格构造函数在创建 <div> 之前运行。因此，当您的表格构造函数代码执行时，目标 div 尚不存在。

将包含构造函数的 <script> 块移到表格 <div> 之后的某个位置，或将构造函数代码包装到 window.onload 函数或类似的 jQuery 替代方案中。