How to make a datatable column clickable - javascript

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

Datatables - Why row() method can not get index value?

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

how can i call getwallet function and filter list which has balance more than 0 [closed]

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;
}

I am making a result output system with javascript but the code seems to work with some variables and doesn't work with other variables

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?

Tableau Missing Password

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
});
});
})();

React data pull not working

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

Categories

Resources