jQuery 制表符插件不工作

Question

我想开始使用 jQuery 并实现交互式 table 来显示一些数据。我遇到了插件 Tabulator，它看起来很有前途，正是我需要的。

但是，当尝试通过 "Quick Start" 我无法显示演示 table。无可否认，我对整个 JavaScript 事物还很陌生，但对我来说，我似乎正确地包含了库和脚本代码。

我的 HTML 文件如下所示：

<!DOCTYPE html>
<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>

<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
  integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
  crossorigin="anonymous"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/2.11.0/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/2.11.0/tabulator.min.js"></script>
</head>

<body>

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

<script type="text/javascript">
$( function() {
  //create Tabulator on DOM element with id "example-table"
  $("#example-table").tabulator({
    height:"320px", 
    fitColumns:true, 
    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){ 
        alert("Row " + id + " Clicked!!!!");
    },
});
//define some sample data
var tabledata = [
    {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
    {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"},
];
//load sample data into the table
$("#example-table").tabulator("setData", tabledata);
});
</script>
</body>

</html>

本质上它只是从快速入门复制粘贴，但我使用 CDN 包含了这些库。我还包括 $(function() {..}); 以确保脚本部分在文档加载后进行评估。

我的库收录有问题吗？当我点击链接时，我得到了相应的文件，所以我认为这不是错误。还是我文档的结构？我在 <head> 中包含库，在 <body> 中包含实际脚本。 body的脚本部分我也试过外包，也没用。

所以：

你能让快速入门工作吗？如果是的话
我的代码有什么问题？

Answer 1

这里有错别字 <div id="exmaple-table"></div>

应该是example-table

jQuery 制表符插件不工作

jQuery Tabulator plugin not working

html

javascript

jquery

jquery-plugins