Question

我已经尝试解决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>

Answer 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);

Answer 2

从4.0版开始，制表器不依赖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!!!!");
    },
});

制表符由于缺少库而无法运行，是否有问题？

2 个答案: