我正在尝试使用 Tabulator 4.1.5 版答案

【问题标题】：I'm trying to use Tabulator version 4.1.5我正在尝试使用 Tabulator 4.1.5 版
【发布时间】：2019-01-07 10:37:58
【问题描述】：

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

表格未呈现。我做错了什么？

【问题讨论】：

Chrome 开发人员工具控制台显示以下内容：tabulator.min.js:4 制表符创建错误 - 找不到匹配选择器的元素：#example-table c.initializeElement @ tabulator.min.js:4 t @ tabulator.min.js:4（匿名）@ tabulator4-test.htm:14 tabulator.min.js:4 Uncaught TypeError: Cannot read property 'tagName' of null at t.c._create (tabulator.min.js:4) at new t (tabulator.min.js:4) at tabulator4-test.htm:14

标签： tabulator

【解决方案1】：

您的表构造函数在创建 <div> 之前运行。所以当你的表构造器代码执行时，目标 div 还不存在。

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

【讨论】：