我已经从 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>
如果我遗漏任何内容或需要更改某些内容,请具体说明(不要只说“查看网站上的这个示例”)