Tabulator не работает из-за отсутствия библиотеки, есть ли проблема? - PullRequest
Новая
       7

Tabulator не работает из-за отсутствия библиотеки, есть ли проблема?

0 голосов
/ 04 ноября 2018

Я пытался решить проблему с 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>

Ответы [ 2 ]

0 голосов
/ 04 ноября 2018

Начиная с версии 4.0 Tabulator не зависит от jQuery, вам нужно только включить его, если вы хотите использовать оболочку jQuery или используете версию 3.5 или более раннюю.

Краткое руководство по содержит инструкции по настройке базового примера.

после добавления исходных файлов: 

<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!!!!");
    },
});
0 голосов
/ 04 ноября 2018

Я не уверен, предоставляет ли эта библиотека плагин 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);
...