I am making a table
HTML tag
<table id="example" class="display" onload="callData()"></table>
javascript
function dataIsSet(){
var dataSet=[];
syncAjaxCall("POST","getGridData" ,"", "application/json")
.done(
function(data) {
if(data.response.Status==1){
for(i=0;i<data.response.Result.length; i++){
dataSet.push([])
}
for(i=0;i<data.response.Result.length; i++){
dataSet[i].push(data.response.Result[i].interestsName);
dataSet[i].push(data.response.Result[i].subscriberCount);
dataSet[i].push(data.response.Result[i].messageCount);
}
}
else
showMessage("green", data.response.Description, "");
});
if (dataSet[0].length==3)
return dataSet;
}
function callData() {
debugger;
$('#example').DataTable( {
data: dataIsSet(),
columns: [
{ title: "Interest Name" },
{ title: "No of Subscribers" },
{ title: "No of Messages" }
] ,
} );
}
My javascript file
<script src="interests/js/jquery-1.12.0.min.js" type="text/javascript"> </script>
<script src="interests/js/jquery.dataTables.min.js" type="text/javascript"></script>
My css file
<link rel="stylesheet" type="text/css" href="interests/css/jquery.dataTables.min.css"/>
Now I want to make no. of messages column a link where it will take value from interest name.
Just insert them inside of PutItHeretag buddy.
Related
here is my code (and ajax data) to insert index column to table. But I don't know why console log don't see the index value. I tried searching solution but couldn't find it. Someone please help me, thanks you so much.
<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" />
<script>
$(function () {
var table = $('#example').DataTable({
ajax: '../ajax/data/objects_salary.txt',
columns: [
{
"render": function (data, type, full, meta) {
return meta.row + 1;
}
},
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'extn' },
{ data: "start_date" },
{ data: "salary" }
]
});
$('#example tbody').on('click', 'tr', function () {
var data = table.row(this).data();
console.log(data);
});
});
</script>
</head>
<body>
<div class="container mt-4 bt-4">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Index</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Progress</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
Console log output
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "320800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
}
That's because the meta.row index is NOT part of the ajax data for the table. table.data() shows only the data (i.e., what you set in the data key of columns[] initialization option.)
Indeed, meta.row is just an index you're rendering via the meta object that - according to the Docs - is:
An object that contains additional information about the cell being
requested. This object contains the following properties (...etc)
try this:
$('#example tbody').on('click', 'tr', function () {
const data = dt.row(this).data();
const index = dt.row(this).index() + 1;
const rowData = {...data, index};
console.log(rowData);
});
P.S. var is legacy Javascript, use const / let instead (unless you've really good reasons to use var)
I suggest changing the id to something else, ex. salary_id. if that doesn't work can you also upload your objects_salary.txt
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
Data is in nested object format which i am getting from an api and the data format is
{
"info": {
"makerCommission": "10",
"takerCommission": "10",
"buyerCommission": "0",
"sellerCommission": "0",
"canTrade": true,
"canWithdraw": true,
"canDeposit": true,
"updateTime": "1639767562245",
"accountType": "SPOT",
"balances": [
{
"asset": "BTC",
"free": 0.00000371,
"locked": 0.00000000
},
{
"asset": "LTC",
"free": 0.00000769,
"locked": 0.00000000
}
}
Passing a value info.balances in a function but it is giving an error. i can use object('info.balances') directly and access its data but i want to filter the data so i can get only those value which are greater than 0.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Comment</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="main-body">
<header>
<div id="main">
<table id="table_id" cellspacing="0" width="100%">
<thead>
<tr class="bg-dark">
<th class="grey">asset</th>
<th class="grey">free</th>
<th class="grey">locked</th>
</tr>
</thead>
</table>
</div>
</div>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
<script>
function getWalletJSON(data) {
console.log(46, data);
let arr = data.filter(function(elem) {
console.log((elem.free > 0));
return (elem.free > 0)
});
}
</script>
<script>
$(document).ready(function(){
$('#table_id').DataTable( {
ajax: {
// url: 'https://jsonplaceholder.typicode.com/comments',
url: 'http://design.trailingcrypto.com/api/trade/balances?exchange=binance',
dataSrc: getWalletJSON(info.balances)
},
columns: [
// { data: 'asset'},
{ data: null,
orderable: false,
className: 'hvhb',
render: function (data, type, row, ){
let newdata ='';
// if(data.free >= 1 ){
// // console.log(data.asset);\
// newdata = `${data.asset}`
// // return newdata;
// }
// return newdata;
if(data.free >0 ) newdata = newdata + `</br>(${data.asset})`;
console.log(newdata);
return newdata;
}
},
// { data: 'free'},
{ data: null,
orderable: false,
className: 'hvhb',
render: function (data, type, row, ){
// if(data.free >= 1 ){
// console.log(data.free);
let newdata = `${data.free}`;
return newdata;
}
},
// { data: 'locked'},
]
});
})
</script>
</body>
</html>
```
You are not returning anything from your getWalletJSON function. The return statement that you do have belongs to the filter function.
function getWalletJSON(data) {
console.log(46, data);
let arr = data.filter(function(elem) {
console.log((elem.free > 0));
return (elem.free > 0)
});
return arr;
}
The code works perfectly fine for the first 4 variables but after that i am getting an invalid page response which i created for any invalid entry. but since my entry of url of every variable is there, still it not responding. Can anyone help me with this code. I have also made every html page mentioned in the variable url.
// Define routing:
var validValues = [{
value: '425769540588',
url: './something.html'
}, {
value: '264719964726',
url: './stud26471.html'
},
{
value: '327774003000',
url: './stud32777.html'
},
{
value: '345102833684',
url: './stud34510.html'
},
{
value: '359221005742',
url: './stud35922100.html'
},
{
value: '423570687069',
url: './stud42357.html'
},
{
value: '439624197820',
url: './stud43962.html'
},
{
value: '440176316459',
url: './stud44017.html'
},
{
value: '681042208435',
url: './stud68104.html'
},
{
value: '729172701174',
url: './stud72917.html'
},
{
value: '898871777413',
url: './stud89887.html'
},
{
value: '913625248899',
url: './stud91362.html'
}
];
var $myInput = $('#my-input');
$('#my-button').click(function(ev) {
ev.preventDefault(); // Prevent submitting the form already
// Look for a valid value
var url = './invalid.html';
$.each(validValues, function(i, validValue) {
if ($myInput.val() === validValue.value) {
url = validValue.url;
return false;
}
});
// Submit the form
$('#my-form').prop('action', url).submit();
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title></title>
</head>
<body>
<h1 id="title">Hello</h1>
<form class="form-inline" id="my-form">
<div class="form-group">
<input type="text" id="my-input">
<button type="submit" id="my-button">Go</button>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
{
value: '359221005742',
url: './stud35922100.html'
}
I would point out that the fourth one (which I have pasted here) breaks your URL convention, which includes only the first 5 digits of the value. Should it possibly be ./stud35922.html instead?
I am trying to fetch data into Tableau using Web Data Connector. The API I am pulling the data from has Basic Auth.
The code runs perfectly fine in WDC Simulator but fails when I run from Tableau Desktop. It throws this error -
"missing password"
But I have integrated the password. (It works fine in simulator as well). Any help is appreciated
HTML Code
<html>
<head>
<title>API Fetch</title>
<meta http-equiv="Cache-Control" content="no-store" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
<script src="https://connectors.tableau.com/libs/tableauwdc-2.0.latest.js" type="text/javascript"></script>
<script src="my_js_above.js" type="text/javascript"></script>
</head>
<body>
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-md-4 col-md-offset-4">
<button type = "button" id = "submitButton" class = "btn btn-success" style = "margin: 10px;">Get Storage Data!</button>
</div>
</div>
</div>
</body>
</html>
JS code
(function() {
// Create the connector object
var myConnector = tableau.makeConnector();
//Setting up the Basic Authorization Header
$.ajaxSetup({
headers: {'Authorization': "Basic " + btoa("my_username" + ":" + "my_password")}
})
myConnector.init = function(initCallback) {
tableau.authType = tableau.authTypeEnum.basic;
initCallback();
};
// Define the schema
myConnector.getSchema = function(schemaCallback) {
var cols = [{
id: "Name",
alias: "Name",
dataType: tableau.dataTypeEnum.string
}, {
id: "Size",
alias: "Size",
dataType: tableau.dataTypeEnum.string
}, {
id: "timeStamp",
alias: "Timestamp",
dataType: tableau.dataTypeEnum.datetime
}];
var tableSchema = {
id: "Storage",
alias: "Fetches data storage",
columns: cols
};
schemaCallback([tableSchema]);
};
// Download the data
myConnector.getData = function(table, doneCallback) {
$.getJSON("https://my_API_URL", function(resp) {
var feat = resp.content,
tableData = [];
// Iterate over the JSON object
for (var i = 0, len = feat.length; i < len; i++) {
tableData.push({
"Name": feat[i].Name,
"Size": feat[i].Size,
"timeStamp": feat[i].timeStamp
});
}
table.appendRows(tableData);
doneCallback();
});
};
tableau.registerConnector(myConnector);
// Create event listeners for when the user submits the form
$(document).ready(function() {
$("#submitButton").click(function() {
tableau.connectionName = "Storage"; // This will be the data source name in Tableau
tableau.submit(); // This sends the connector object to Tableau
});
});
})();
I am new to react and trying to build a table component that changes based on what is passed in for headers and rows.
I have been following the fb react tutorials and I have hit a road block I have looked on here and did some changes but nothing is working.
Here is my HTML page that gets the generated content.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=10; IE=9; IE=8; IE=7; IE=EDGE" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" type="text/css" href="/vendor/twbs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/vendor/etdsolutions/sweetalert/sweetalert.css?<?= assetCacheQueryStr() ?>" />
<link rel="stylesheet" type="text/css" href="/lib/jquery-ui-1.11.4/jquery-ui.css">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/css/bootstrap-select.min.css">
<!-- Javascript -->
<script src="https://unpkg.com/react#15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-core#5.8.38/browser.min.js"></script>
<script src="https://unpkg.com/jquery#3.1.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/remarkable#1.6.2/dist/remarkable.min.js"></script>
<script src="/vendor/etdsolutions/sweetalert/sweetalert.min.js?<?= assetCacheQueryStr()?>"></script>
<script src="/vendor/twbs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/js/bootstrap-select.min.js"></script>
<script src="/lib/sorttable.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<title>React</title>
</head>
<body>
<div id="loadboardContainer"></div>
<!-- Import the table react setup. -->
<script type="text/babel" src="test.js"></script>
</body>
</html>
Now I have the external react script in the test.js file which is this.
var Table = React.createClass({
getInitialState: function() {
return {
results: [],
columns: []
}
},
componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function(result) {
result = JSON.parse(result);
this.setState({
results: result['resultRows'],
columns: $.makeArray(result['resultCols'])
});
}.bind(this));
},
componentWillUnmount: function(){
this.serverRequest.abort();
},
render: function() {
// Set array for rows.
var rows = [];
var header = [];
this.state.columns.map(function(cols) {
header.push(<TableColumns data={cols.cols} key={cols.id} />);
});
this.state.results.map(function(result) {
rows.push(<TableRow data={result.rows} key={result.id} />);
});
// Loop through head to get columns.
/*this.props.columns.forEach(function(cols) {
header.push(<TableColumns data={cols.cols} key={cols.id} />);
});
// Loop through the returned rows and display.
this.props.results.forEach(function(result) {
rows.push(<TableRow data={result.rows} key={result.id} />);
});*/
// Return the table.
return (
<table className="table table-condensed">
<thead>
{header}
</thead>
<tbody>
{rows}
</tbody>
</table>
);
}
});
// Set up columns
var TableColumns = React.createClass({
render: function() {
var colNodes = this.props.data.map(function(col, i){
return (
<th key={i}>{col}</th>
);
});
return (
<tr>
{colNodes}
</tr>
);
}
});
// Set up row
var TableRow = React.createClass({
render: function() {
var rowNodes = this.props.data.map(function(row, i){
return (
<td key={i}>{row}</td>
);
});
return (
<tr>
{rowNodes}
</tr>
);
}
});
var futureContainer = document.getElementById('loadboardContainer');
ReactDOM.render(<Table source="getTableValues.php" />, futureContainer);
As you can see I have the commented out part of what used to be the props calls to the table. Now that I am trying to get the information from another file it looks like on here I have to use state.
On the other file this is what I have. Its just an array of array to return data before I actually query the stuff.
<?php
// Start the session.
session_start();
// Set Variables.
$returned = array(); // Returns results
$returned['resultRows'][0] = array();
$returned['resultRows'][0]['id'] = 10221;
$returned['resultRows'][0]['rows'] = array("654221", "2016-03-26", "Customer 1", "98755/54622", "Carrier 1", "Driver 1", "2016-03-28", "TX - IN", "DRY", "1240", "", "", "This is a test note");
$returned['resultRows'][1] = array();
$returned['resultRows'][1]['id'] = 10223;
$returned['resultRows'][1]['rows'] = array("654221", "2016-03-26", "Customer 1", "98755/54622", "Carrier 2", "Driver 2", "2016-03-28", "TX - IN", "DRY", "1240", "", "", "This is a test note2");
$returned['resultCols']['id'] = 100;
$returned['resultCols']['cols'] = array("PO Number", "Load Date", "Customer(s)", "Customer PO", "Carrier", "Driver", "Delivery Date", "Lane", "Temp", "Weight", "Attention Date", "ND Date", "Notes");
echo json_encode($returned);
?>
I keep getting an error this.state.columns.map is not a function.
The same is true if I use this.props. So what am I doing wrong on this? I know how to make it work if I statically put in the data and insert that way on the since page but the call is not working.
You try to map a string at the beginning because of async $.get
replace this :
getInitialState: function() {
return {
results: '',
columns: ''
}
}
by this :
getInitialState: function() {
return {
results: [],
columns: []
}
}
EDIT TO MATCH PHP RETURN
var Table = React.createClass({
getInitialState: function() {
return {
results: [],
columns: []
}
},
componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function(result) {
result = JSON.parse(result);
this.setState({
results: result['resultRows'],
columns: result['resultCols'].cols
});
}.bind(this));
},
componentWillUnmount: function(){
this.serverRequest.abort();
},
render: function() {
// Return the table.
return (
<table className="table table-condensed">
<thead>
<TableColumns data={this.state.columns} />
</thead>
<tbody>
{this.state.results.map(function(result) {
rows.push(<TableRow data={result.rows} key={result.id} />);
})}
</tbody>
</table>
);
}
});
// Set up columns
var TableColumns = React.createClass({
render: function() {
var colNodes = this.props.data.map(function(col, i){
return (
<th key={i}>{col}</th>
);
});
return (
<tr>
{colNodes}
</tr>
);
}
});
// Set up row
var TableRow = React.createClass({
render: function() {
var rowNodes = this.props.data.map(function(row, i){
return (
<td key={i}>{row}</td>
);
});
return (
<tr>
{rowNodes}
</tr>
);
}
});
var futureContainer = document.getElementById('loadboardContainer');
ReactDOM.render(<Table source="getTableValues.php" />, futureContainer);