Tabulator 由于缺少库而无法正常工作，有什么问题吗？答案

【问题标题】：Tabulator not working because of a missing library, is there any issue?Tabulator 由于缺少库而无法正常工作，有什么问题吗？
【发布时间】：2018-11-04 00:40:06
【问题描述】：

长期以来，我一直在尝试解决 Tabulator 的问题，但我不断收到相同的错误，不知道出了什么问题。有没有我想念的图书馆？

Uncaught TypeError: $(...).tabulator is not a function

<head>
    <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>

    <link href="https://unpkg.com/tabulator-tables@4.0.4/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.0.4/dist/js/tabulator.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.0.5/css/tabulator.min.css" >
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.0.5/js/tabulator.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.0.5/js/tabulator_core.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.0.5/js/modules/format.min.js"></script>
</head>

$("#example-table").tabulator({
height:"311px",
columns:[
    {title:"Name", field:"name"},
    {title:"Progress", field:"progress", sorter:"number"},
    {title:"Gender", field:"gender"},
    {title:"Rating", field:"rating"},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob", align:"center"},
    ]
});

var tabledata = [
    {id:1, progress:"Oli Bob", gender:"12", rating:"red",col:"10", dob:""}];

//load sample data into the table
//table.setData(tabledata);
$("#example-table").tabulator("setData", tabledata);

</script>

【问题讨论】：

标签： jquery html jquery-ui tabulator

【解决方案1】：

我不确定这个库是否提供 jquery 插件。但是根据这个库的文档，下面的代码是有效的。

var table = new Tabulator("#example-table", {
    height: "311px",
    columns: [
        { title: "Name", field: "name" },
        { title: "Progress", field: "progress", sorter: "number" },
        { title: "Gender", field: "gender" },
        { title: "Rating", field: "rating" },
        { title: "Favourite Color", field: "col" },
        { title: "Date Of Birth", field: "dob", align: "center" },
    ]      
});

var tabledata = [
    { id: 1, name:"Oli", progress: "Oli Bob", gender: "12", rating: "red", col: "10", dob: "" }];

table.setData(tabledata);

【讨论】：

我遇到了一个问题，说#example-table 不可用
您必须在 HTMl 中使用 id = "example-table" 声明 div 标签

【解决方案2】：

从 4.0 版开始，Tabulator 不依赖于 jQuery，如果您想使用 jQuery 包装器或使用 3.5 或更早版本，则只需包含它。

Quickstart Guide 带您了解如何设置基本示例。

一旦你包含了源文件：

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

你需要创建一个 div 来保存表格：

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

定义一个数据数组：

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"},
];

然后创建你的表：

var table = new Tabulator("#example-table", {
    height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
    data:tabledata, //set the table data
    layout:"fitColumns", //fit columns to width of table (optional)
    columns:[ //Define Table Columns
        {title:"Name", field:"name", width:150},
        {title:"Age", field:"age", align:"left", formatter:"progress"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
    ],
    rowClick:function(e, row){ //trigger an alert message when the row is clicked
        alert("Row " + row.getData().id + " Clicked!!!!");
    },
});

【讨论】：