我正在尝试使用Tabulator版本4.1.5

问题描述 投票:1回答:1

我正在使用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>

该表不呈现。我做错了什么?

tabulator
1个回答
4
投票

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

在表<script>之后移动包含构造函数的<div>块,或者将构造函数代码包装到window.onload函数或类似的jQuery替代中。

© www.soinside.com 2019 - 2024. All rights reserved.