I wanted to get started with jQuery and implement an interactive table to display some data. I came across the plugin Tabulator which seems very promising, exactly what I need.
However, when trying to go through the "Quick Start" I can't get the demo table to show up. Admittedly I am fairly new to the whole JavaScript thing, but for me it looks like I correctly included the libraries and the script code.
My HTML file looks like this:
<!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>
Essentially it is just copy pasted from the Quick Start, but I included the libraries by using a CDN. I also included $(function() {..}); to make sure, the script part is evaluated after the document is loaded.
Is there something wrong with my library inclusion? When I follow the links, I get the respective files, so I don't think that's the mistake. Or is it the structure of my document? I included the libraries in the <head> and the actual script inside the <body>. I also tried to outsource the script part of the body, but that did not work either.
So:
- Can you get the Quick Start to work and if so
- What is wrong with my code?
