I'm trying to configure a tabulator table to display data from this JSON url:
https://records.nhl.com/site/api/franchise-skater-records?cayenneExp=franchiseId=33
My code is below, I'm trying to get it to display the first name and assists for all players in the JSON file, any help is greatly appreciated! Thanks
HTML
<link href="https://unpkg.com/tabulator-
tables#4.0.5/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-
tables#4.0.5/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>
JS
//Build Tabulator
var table = new Tabulator("#example-table", {
ajaxURL: ("https://records.nhl.com/site/api/franchise-skater-records?cayenneExp=franchiseId=29"),
height:"100px",
layout:"fitColumns",
placeholder:"Placeholder Data",
index: "id",
columns:[
{title:"Name", field:"firstName", sorter:"string"},
{title:"Assists", field:"assists", sorter:"number"},
],
});
You are having issues because your data is being returned as an array in the data property of an object rather than simply as an array.
To handle data in that format you will need to use the ajaxResponse callback to tell Tabulator where to look for the data array. so your constructor should look like this:
var table = new Tabulator("#example-table", {
ajaxURL: "https://records.nhl.com/site/api/franchise-skater-records?cayenneExp=franchiseId=29",
height:100,
layout:"fitColumns",
placeholder:"Placeholder Data",
index: "id",
columns:[
{title:"Name", field:"firstName", sorter:"string"},
{title:"Assists", field:"assists", sorter:"number"},
],
ajaxResponse:function(url, params, response){
//url - the URL of the request
//params - the parameters passed with the request
//response - the JSON object returned in the body of the response.
return response.data; //pass the data array into Tabulator
},
});
Related
I have a set of data that I want to download to an XLSX sheet with some pre-formatting of the data. For this purpose I was intending to use the documented downloadDataFormatter callback (https://tabulator.info/docs/5.4/callbacks#download).
When the page is rendered the data is present and can be exported to the XLSX file but without the formatting that I need. In the console of the browser it displays the following warning "Invalid table constructor option:","downloadDataFormatter".
Has this callback been removed or deprecated?
//Sample Data
var tableData = [
{name:"Bob",age:47},
{name:"Steve",age:17},
{name:"Jim",age:23},
]
//Example Table
var table = new Tabulator("#table", {
downloadDataFormatter:function(data){
//data - active table data array
data.forEach(function(row){
row.age = row.age >= 18 ? "adult" : "child";
});
return data;
},
data:tableData, //load data into table
height:200, //enable the virtual DOM
columns:[
{title:"Name", field:"name", width:200},
{title:"Age", field:"age", width:200},
],
});
function downloadData(){
table.download("xlsx", "data.xlsx", {sheetName:"MyData"});
}
.tabulator{
background-color:#f3f3ff;
}
<div id="table"></div>
<button onClick="downloadData()">
Download
</button>
<script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#5.4.3/dist/js/tabulator.min.js"></script>
JSFiddle: https://jsfiddle.net/jfLtgcxp/
I am trying to implement an downloadable table on my project, I have all the cdns required and the tabulator is already installed by node. I am programming in Laravel. This is my code so far:
<div id="example-table"></div>
<script type="text/javascript">
//Build Tabulator
var tabledata = [
{id:1, name:"Oli Bob", progress:"12", gender:"red", rating:"", col:"", dob:"", car:""}];
table.setData(tableData);
var table = new Tabulator("#example-table", {
data:tabledata,
height:"311px",
columns:[
{title:"Name", field:"name", width:200},
{title:"Progress", field:"progress", width:100, sorter:"number"},
{title:"Gender", field:"gender"},
{title:"Rating", field:"rating", width:80},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", align:"center", sorter:"date"},
{title:"Driver", field:"car", align:"center", formatter:"tickCross"},
],
});
//trigger download of data.csv file
$("#download-csv").click(function(){
table.download("csv", "data.csv");
});
//trigger download of data.json file
$("#download-json").click(function(){
table.download("json", "data.json");
});
//trigger download of data.xlsx file
$("#download-xlsx").click(function(){
table.download("xlsx", "data.xlsx", {sheetName:"My Data"});
});
//trigger download of data.pdf file
$("#download-pdf").click(function(){
table.download("pdf", "data.pdf", {
orientation:"portrait", //set page orientation to portrait
title:"Example Report", //add title to report
});
});
</script>
<script type="text/javascript">
</script>
</div>
Tabulator only manages the area inside the table, it will not create buttons outside of the table itself.
You need to add a button to the page yourself:
<button id="download-csv">Download CSV</button>
And then add a click binding to trigger the action on your table:
$("#download-csv").click(function(){
table.download("csv", "data.csv");
});
I have a list of items where the title is a link to display a detailed view of the item. Click the title and it correctly goes to url + Id. In the Vue tolls the detail page retrieves the item with matching ID but as and array not an object and the template does not display any properties - what am I missing?
<script>
import axios from "axios";
export default {
name: "Report",
data() {
return {
report: {}
};
},
mounted: function() {
this.getReport();
},
methods: {
getReport() {
let uri = "http://localhost:5000/api/reports/" + this.$route.params.id;
axios.get(uri).then(response => {
this.report = response.data;
});
}
}
};
</script>
The template is so
<template>
<v-content>
<h1>report detail page</h1>
<p>content will go here</p>-
<h3>{{ report.month }}</h3>
<pre>{{ report._id }}</pre>
</v-content>
</template>
any comments appreciated
url + Id
It sounds like your issue is that you are receiving an array not an object.
You can pull out objects encapsulated inside arrays easily.
For example, if we had the following data:
var bus1 = {passengers:10, shift:1}
var busArr = [bus1]
which we can assert: busArr === [{passengers:10, shift:1}]
We could then pull out bus1 by referencing the index 0:
var bus1New = busArr[0]
If you want to avoid the data transformation and just output the structure you can consider a v-for in your template.
<p v-for="val in report">
_id: {{val._id}}
<br>
month: {{val.month}}
</p>
I want to save the table to a text file after making changes. When I click the save button tbldata is empty and my text file is overwritten and blank.
I have tested the button with: var tbldata = JSON.stringify([{"id":1, "name":"Bob"}]) and it works.
I am assuming I am using table.getData incorrectly. Where and how in my button function should var tbldata = table.getdata be located?
I cannot find a specific example in the documentation
<button class="button" id="save-data" >Save Data</button>
<script>
//create Tabulator on DOM element
var table = new Tabulator("#meetinfo-table", {
height:200, // set height of table (in CSS or here)
selectable:true, //make rows selectable
layout:"fitDataFill",//fit columns to fit data and width of table (optional)
//Sort data decending
initialSort:[
{column: "meetdate", dir:"desc"}],
//Define Table Columns
columns:[
{title:"Meeting Date", field:"meetdate", width:150, editor:"input"},
{title:"Topic", field:"topic", align:"left", editor:"input"},
{title:"Speaker", field:"speaker", editor:"input"},
{title:"Room", field:"room", editor:"input"},
{title:"CE", field:"ce", align:"left", editor:"input"},
{title:"RSVP Survey Code", field:"rsvpcode",editor: "input"},
{title:"RSVP Due Date", field:"rsvpduedate", editor:"input"},
],
});
//Saves entire table to JSON encoded string
var button = document.getElementById("save-data");
button.addEventListener("click", function(){
var tbldata = table.getdata;
var request= new XMLHttpRequest(); // new HttpRequest instance
request.open("POST", "process.php");
request.setRequestHeader("Content-type", "application/json");
//request.send(tbldata);
});
//loads data into the table
table.setData('meetinfo_array.txt');
</script>
There are two issues there, it is getData not getdata and you a not actually calling the function because you are missing the parenthesis after the function name. It should be:
var tbldata = table.getData();
I currently am working on designing a Sharepoint survey.
The first question is a lookup from a list, which looks like this:
Course1
Course2
Course3
Course4
Now, the user has to select one of these answers. While I got the lookup working, I have problem in updating the list.
the idea is, that the user can add his own courses to complement the list.
So for example, he can select OTHER and type in Course5 into a textbox, which should then be added to the list. The next user should then be able to select Course5 from the drop down list.ยจ
I have problems writing the result of a survey into the list - is this even possible?
Kind regards.
In choice field, it provide the 'fill-in' feature, unfortunately, the lookup column can't provide this feature.
As a workaround, we can using jQuery append a textbox and a button in the lookup column below in the newform.aspx page. Add some text in the textbox and click the "Add" button, then add data to the lookup list. The following example for your reference:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var questionTitle="question1";
var lookupListName="CL30";
$(function(){
$("select[title='"+questionTitle+"']").closest("td").append("<input id='lookupitemTitle' type='text'/> <input id='addlookupitembtn' type='button' value='Add'>");
$("#addlookupitembtn").click(function(){
if($("#lookupitemTitle").val().trim()!=""){
AddListItem(lookupListName);
}
});
});
function AddListItem(listName){
var itemType = GetItemTypeForListName(listName);
var item = {
"__metadata": { "type": itemType },
"Title": $("#lookupitemTitle").val()
};
$.ajax({
url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify(item),
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function (data) {
var item=data.d;
$("select[title='"+questionTitle+"']").append("<option selected='selected' value='"+item.ID+"'>"+item.Title+"</option>");
},
error: function (data) {
alert("Error");
}
});
}
function GetItemTypeForListName(name) {
return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
}
</script>