tabulator - 制表符：演示显示一个空白页

问题描述

我已经从 Tabulator 页面复制了“基本”演示并进行了必要的更改，以便它在本地查看 javascript 和 css 文件，但它只显示一个空白页面。以下是我网站的页面来源。为什么页面出现空白？

 <!DOCTYPE html>
<html lang="en">
        <head>
                <link href="t/dist/css/tabulator.min.css" rel="stylesheet">
        </head>
        <body>
                <div id="example-table"></div>

                <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
                <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
                <script type="text/javascript" src="t/dist/js/tabulator.min.js"></script>
                <script type="text/javascript">
                        //sample data
                        var tabledata = [
                            {id:1, name:"Oli Bob", age:"12", col:"red", dob:"12/08/2017"},
                            {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
                            {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
                            {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
                            {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
                        ];

                        $("#example-table").tabulator({
                            height:200, // set height of table to enable virtual DOM
                            data:tabledata, //load initial data into table
                            layout:"fitColumns", //fit columns to width of table (optional)
                            columns:[ //Define Table Columns
                                {title:"Name", field:"name", sorter:"string", width:150},
                                {title:"Age", field:"age", sorter:"number", align:"left", formatter:"progress"},
                                {title:"Favourite Color", field:"col", sorter:"string", sortable:false},
                                {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
                            ],
                            rowClick:function(e, id, data, row){ //trigger an alert message when the row is clicked
                                alert("Row " + id + " Clicked!!!!");
                            },
                        });
                </script>
        </body>
</html>

编辑/更新

我下载了 4.2.1 版本并直接从主页中提取了示例。还是行不通。几个月来我一直在修补这个（打开和关闭）并且还没有看到表格中的数据。我在网站上看到所有正在运行的示例，但是当我将它们复制到我的服务器时，它们没有显示任何数据。

我究竟做错了什么？

<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>

<div id="example-table"></div>

<script type="text/javascript">

var table = new Tabulator("#example-table", {
        data:tabledata,           //load row data from array
        layout:"fitColumns",      //fit columns to width of table
        responsiveLayout:"hide",  //hide columns that dont fit on the table
        tooltips:true,            //show tool tips on cells
        addRowPos:"top",          //when adding a new row, add it to the top of the table
        history:true,             //allow undo and redo actions on the table
        pagination:"local",       //paginate the data
        paginationSize:7,         //allow 7 rows per page of data
        movableColumns:true,      //allow column order to be changed
        resizableRows:true,       //allow row order to be changed
        initialSort:[             //set the initial sort order of the data
                {column:"name", dir:"asc"},
        ],
        columns:[                 //define the table columns
                {title:"Name", field:"name", editor:"input"},
                {title:"Task Progress", field:"progress", align:"left", formatter:"progress", editor:true},
                {title:"Gender", field:"gender", width:95, editor:"select", editorParams:{"Male":"male", "Female":"female"}},
                {title:"Rating", field:"rating", formatter:"star", align:"center", width:100, editor:true},
                {title:"Color", field:"col", width:130, editor:"input"},
                {title:"Date Of Birth", field:"dob", width:130, sorter:"date", align:"center"},
                {title:"Driver", field:"car", width:90,  align:"center", formatter:"tickCross", sorter:"boolean", editor:true},
        ],
});

</script>

如果我遗漏任何内容或需要更改某些内容，请具体说明（不要只说“查看网站上的这个示例”）

标签： tabulator

tabulator - 制表符：演示显示一个空白页

问题描述

解决方案

推荐阅读