Adding onClick links into a JSON File Without javascript - javascript

So I am trying to mimic a data visualization example code from cytoscape library and add links to the nodes of the data.
Here is the example
http://js.cytoscape.org/demos/cose-layout/
Here is the code associated with the example
https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/cose-layout
In the code on github there is the data.json file and example of a node looks like this
[{
"data": {
"id": "605755",
"idInt": 605755,
"name": "PCNA",
"score": 0.006769776522008331,
"query": true,
"gene": true
},
"position": {
"x": 481.0169597039117,
"y": 384.8210888234145
},
"group": "nodes",
"removed": false,
"selected": false,
"selectable": true,
"locked": false,
"grabbed": false,
"grabbable": true,
"classes": "fn10273 fn6944 fn9471 fn10569 fn8023 fn6956 fn6935 fn8147 fn6939 fn6936 fn6629 fn7928 fn6947 fn8612 fn6957 fn8786 fn6246 fn9367 fn6945 fn6946 fn10024 fn10022 fn6811 fn9361 fn6279 fn6278 fn8569 fn7641 fn8568 fn6943"
},
I tried adding
"links": {
"self": { "href": "https://www.google.com" }
},
and variations of "links": something but no dice.
I was like okay maybe I can take the ID and add a link via javascript but I haven't been successful.
$('#605755').dataTable( {
"columnDefs": [ {
"data": "download_link",
"render": function ( data, type, full, meta ) {
return '';
}
} ]
} );
I am wondering if this is possible to add it in the JSON file directly and just link to external sites without the javascript. When I open the inspect it basically just shows a canvas with no way to access what's inside the canvas it seems like.
I am definitely new to JSON so any help in the right direction would be greatly appreciated.

Yes sure you can do this use fnDrawCallback
fnDrawCallback: function( oSettings,data,index ){
$('.linkClassName').on('click', function(event){
// do whatever u want
});
}
And add class Name to your link
$('#605755').dataTable( {
"columnDefs": [ {
"data": "download_link",
"render": function ( data, type, full, meta ) {
return '<a class="linkClassName" href="https://www.google.com">data</a>';
}
} ]
} );

Related

JS datatabe with Array edit

I has create HTML page, with user entry data in page then upload to SQL server.
I has study DataTable to load array to table, try edit still not , has any one can help?
var array = ['54 GR', '89 GR', 'Internal Transfer', 'Putaway']
$('#example').DataTable({
data: array,
"searching": false,
columns: [{
"data": 0,
"title": "Date"
}, {
"data": 1,
"title": "Account"
}, {
"data": 2,
"title": "Type"
}, {
"data": 3,
"title": "OPDeployed",
"render": function(data, type, row, meta) {
return "<input type='text' value=''/>";
}
}]
});
Its really difficult to say without being able to see the page or even the code. All I can really say is that the load order should be:
jQuery
jQuery UI
DataTables
2 and 3 can be swapped and you shouldn't load more than one of each.

How to build treeviewer from an XML file without AJAX

I need to build a treeview from an XML file. I don't want to use AJAX, as I can simply read the file from my disk (I'm building this app on Electron)
fs.readFile('./xmlfile.xml', function(err, data) {};
Is there anyone that could guide me how to build a tree of an custom made XML file? Basically I'd like to be able to build a tree from any XML data I put into my file.
I've already tried using JStree, but I keep having the same issue with it - it doesn't spit any errors in the console and prints a blank page.
testData is where keep my xmlfile.xml (file is definetely valid and it prints correctly when I put it through console log)
$(document).ready(function() {
// NeDB - Database init
var Datastore = require('nedb');
var fs = require('fs');
fs.readFile('./xmlfile.xml', function(err, testData) {
$('#cRIO_tree')
.jstree({
"core": {
"animation": 0,
"check_callback": true,
"icon": "../assets/tree.png",
"themes": {
"stripes": true
},
"xml_data": {
"data": testData,
"progressive_render": "true"
},
},
"dnd": {
"always_copy": true
},
"types": {
"#": {
"max_children": 1,
"max_depth": 10,
"valid_children": ["root"]
},
"root": {
"valid_children": ["default"]
},
"default": {
"icon": "glyphicon glyphicon-tree-deciduous",
"valid_children": ["default", "file"]
},
"file": {
"icon": "glyphicon glyphicon-flash",
"valid_children": []
}
},
"plugins": ["contextmenu", "dnd", "search", "state", "types",
"sort", "wholerow", "themes", "xml_data"]
})
}
}
Problem is that no matter what I put into my xml - it simply doesn't print it. I even tried examples from
https://old.jstree.com/documentation/xml_data
<!-- FLAT -->
<root>
<item id="root_1" parent_id="0" state="closed">
<content>
<name><![CDATA[Node 1]]></name>
</content>
</item>
<item id="node_2" parent_id="root_1">
<content>
<name><![CDATA[Node 2]]></name>
</content>
</item>
</root>
and that doesn't seem to be working..

Jquery Datatable source from Application state

I have an application built using Reactjs -Redux. Now- Im trying to incorporate Jquery Datatable. So the data that I want to be on my datatable is fetched by dispatching action on my redux. Basically, I already have my data on my application state. I need this data from my application state to be on my jquery datatable. Like so:
$('#example').DataTable( {
"ajax": application_state.data,
"columns": [
{ "data": "name[, ]" },
{ "data": "hr.0" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "hr.2" },
{ "data": "hr.1" }
]
} );
Obviously, the above code won't work because like I said my data is already on my application state and I don't have to use "ajax". I also tried something like this:
$('#example').DataTable( {
"data": application_state.data,
"columns": [
{ "data": "name[, ]" },
{ "data": "hr.0" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "hr.2" },
{ "data": "hr.1" }
]
} );
But, I still have no luck.
The JSON data that I have on my state is completely valid, it's an array of object. I just want it loaded on my jquery datatable. Now, there is one option that I know will work 100% but it's the dirty way. That is by building your data manually on the table. I meant creating the rows (<tr><td>..) by yourself. I don't like that.
Your response is greatly appreciated.
Best
I found a way to do it using aoColumns and fnAddData. Something like this:
// this is where field mapping happens
const cols=[
{'mDataProp':'<column/fieldname>'}
]
const dataTableOptions = {
responsive: true,
bDestroy:true,
pageLength: 25,
deferRender:true,
aoColumns:cols //The aoColumns
}
const _dt=$('#example')
.dataTable(dataTableOptions);
_dt.fnClearTable();
_dt.fnAddData(<your state data here>)// Then Add your data using fnAddData
Thanks for viewing guys... cheers! I hope others will find this helpful too.

DataTables - Format returning ajax data

I am working on this example from DataTables.net but I have made modification so that it works with my ajax call to my API.
My problem is that my API returns the DateTime values like this...
Created=2015-02-13T00:00:00
I need to be able to convert that to just be just the date without the time for my table (hopefully without changing the API). I have tried everything that I know to try. I am still sort of a beginner at this advanced javascript stuff. I was trying to do just a simple substring but I dont think that is working. Well at least how I was trying anyways.
Thanks for anything help!
DataTables v1.10.5
Jquery v1.11.2 (due to need to support IE8)
Original Problem Code:
$(document).ready(function () {
var table = $('#AllHuddleRecords').DataTable({
"ajax": "../api/huddle/posts",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data" : "EmpName" },
{ "data": "Created" },
{ "data" : "PriorityName" },
{ "data" : "TopicName" }
]
});
Thanks to the guidance of cmxl...here is the working code...
var table = $('#AllHuddleRecords').DataTable({
"ajax": "../api/huddle/posts",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data" : "EmpName" },
{ "data": "Created" },
{ "data" : "PriorityName" },
{ "data" : "TopicName" }
],
"columnDefs": [
{
"render" : function (data, type, row) {
return new Date(data).toLocaleString();
},
"targets": 2
}
]
});
You can hook in to the column rendering event. See the documentation here:
https://datatables.net/examples/advanced_init/column_render.html
$(document).ready(function() {
$('#example').dataTable( {
"columnDefs": [
{
// The `data` parameter refers to the data for the cell (defined by the
// `data` option, which defaults to the column being worked with, in
// this case `data: 0`.
"render": function ( data, type, row ) {
return data.slice(0, data.indexOf('T'));
},
"targets": 0
},
{ "visible": false, "targets": [ 3 ] }
]
} );
} );
Or if you want to parse the string as a date you can refer to this answer here:
Converting string to date in js
//...
"render": function ( data, type, row ) {
return new Date(data).toString();
}
//...
Here you can look even deeper into the Date object in Javascript:
https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Date
Is it possible to do some pre-processing on your data before you send it to data tables, for example if you are inserting the following data into your data table, use Date.parse() on each element of your data to convert to the desired format?
var ajaxData = {
"data": [{
"EmpName": "Bob",
"Created": "2015-02-13T00:00:00",
"PriorityName": "Priority1",
"TopicName": "Topic1"
}]
};
$(ajaxData.data).each(function() {
var dateMillis = new Date(this.Created);
this.Created = dateMillis.getMonth() + "/" + dateMillis.getDay() + "/" + dateMillis.getFullYear();
});
Note that if you want to sort on your date column, then the solution may well be to pre-process data and convert dates to milliseconds using Date.parse() and then use render to convert the date to readable format as cmxl suggested. Good luck!

Accessing a JSON object that contains a nested array using jQuery

I made an API call (google translate) and it returns the following:
{
"data": {
"detections": [
[
{
"language": "en",
"isReliable": false,
"confidence": 0.051902372
}
]
]
}
}
I want to access the "language" value using javascript (using the jQuery ajax function). I tried something like:
response.data.detections[0][0].language
but that does not work. Help?
We really do need more information but if I had to guess blindly I would guess that response actually contains the following string:
'{
"data": {
"detections": [
[
{
"language": "en",
"isReliable": false,
"confidence": 0.051902372
}
]
]
}
}'
If that is the case you could try something like $.parseJSON(response).data.detections[0][0].language

Categories

Resources