Now I want to integrate the plugin Datatables using JQuery.
for example I can add this into my code above :
$("table#myTableId").dataTable();
If I take the ID of the table from the HTML source and call the dataTable() function, all the mentioned features will be automatically added and they will be fully functional. jQuery DataTables takes the plain HTML table and dynamically injects all elements,
I assign an id to my table I created above so that I can use the ID to call the datatable() later on.
I managed to add the ID but there's no change to my Table when I call the dataTable(). What did I do wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
border: 2px black solid;
font: 12px sans-serif;
}
td {
border: 1px black solid;
padding: 5px;
}
</style>
</head>
<body>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<!-- <script src="d3.min.js"></script>-->
<script type="text/javascript"charset="utf-8">
d3.text("test.csv", function(data) {
var parsedCSV = d3.csv.parseRows(data);
var container = d3.select("body")
.append("table")
.attr("id", "custom_id")
.selectAll("tr")
.data(parsedCSV).enter()
.append("tr")
.selectAll("td")
.data(function(d) { return d; }).enter()
.append("td")
.text(function(d) { return d; });
});
$("#custom_id").dataTable();
</script>
</body>
<html>
Assign the id as you would assign any other attribute:
var container = d3.select("body")
.append("table")
.attr('id', 'custom_id');
Which leads to $('#custom_id').dataTable();
Related
How do I append multiple x3d elements in javascript via loop? Seems like x3d can be appended successfully, but the elements below it only show up for the first x3d.
Thank you for the help in advance!
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://x3dom.org/download/dev/x3dom-full.js"></script>
<script src="d3.v5.min.js"></script>
<script src="d3-x3dom-axis.min.js"></script>
<link rel="stylesheet" href="https://x3dom.org/download/dev/x3dom.css" />
</head>
<body>
<script>
var width = 800, height = 400;
var years= ['2017','2018','2019','2020','2021','2022'];
var clusters= [3,4,5,6,7,8,9,10];
for(year of years){
for(cluster of clusters){
id = year+'-'+cluster
var x3d = d3.select("body").append("x3d")
.attr('id',id)
.attr("width", width + 'px')
.attr("height", height +'px' )
}
}
</script>
</body>
DOM screenshot
I have a standalone HTML page (no webserver) and I'm after some javascript code that will display the contents of a .csv file in the page.
The .csv file contains a list of usernames that I would like to be displayed. I'm doing it this way as the people that need to update the list know nothing of HTML and initially thought this would be an easier way to do it.
All the code snippets that I have found either try to upload a file and then only display the contents till you reload the page again or I don't have enough knowledge to tweak the code to work.
Any help appreciated & TYIA
Andy
#Barthy code that is very close to what I would like is this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
border: 2px black solid;
font: 12px sans-serif;
}
td {
border: 1px black solid;
padding: 5px;
}
</style>
</head>
<body>
<div id='container'></div>
<script type="text/javascript"charset="utf-8">
var data = 'heading1,heading2,heading3,heading4,heading5\nvalue1_1,value2_1,value3_1,value4_1,value5_1\nvalue1_2,value2_2,value3_2,value4_2,value5_2';
var lines = data.split("\n"),
output = [],
i;
for (i = 0; i < lines.length; i++)
output.push("<tr><td>"
+ lines[i].slice(0,-1).split(",").join("</td><td>")
+ "</td></tr>");
output = "<table>" + output.join("") + "</table>";
var div = document.getElementById('container');
div.innerHTML = output;
</script>
</body>
</html>
but would like to get data from CSV file
#cars10 example of what is in the csv file:
Heading_1,Heading_2,Heading_3,Heading_4
John, Smith, 29, Male
Andy, Jones, 32, Male
Abbey, Stewart, 35, Female
if that helps
Solution so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table {
border-collapse: collapse;
border: 2px black solid;
font: 12px sans-serif;
}
td {
border: 1px black solid;
padding: 5px;
}
</style>
<script>
window.onload=function(){ with (new XMLHttpRequest()) {
onreadystatechange=cb; open('GET','data.csv',true); responseType='text';send();
}}
function cb(){if(this.readyState===4)document.getElementById('main')
.innerHTML=tbl(this.responseText); }
function tbl(csv){ // do whatever is necessary to create your table here ...
return csv.split('\n')
.map(function(tr,i){return '<tr><td>'
+tr.replace(/\t/g,'</td><td>')
+'</td></tr>';})
.join('\n'); }
</script>
</head>
<body>
<h2>Hey, this is my fabulous "dynamic" html page!</h2>
<table id="main"></table>
</body>
</html>
Here is a complete working example (works even on a local directory, i.e. no web server at all!). This is a plain JavaScript solution. Personally, I would always use jquery, but in this simple case you can do without it.
The page expects the csv-file ("csv.txt") in the same directory. But it is up to you to specify another (relative) path in the oReq.open() line.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){ with (new XMLHttpRequest()) {
onreadystatechange=cb; open('GET','csv.txt',true); responseType='text';send();
}}
function cb(){if(this.readyState===4)document.getElementById('main')
.innerHTML=tbl(this.responseText); }
function tbl(csv){ // do whatever is necessary to create your table here ...
return csv.split('\n')
.map(function(tr,i){return '<tr><td>'
+tr.replace(/\t/g,'</td><td>')
+'</td></tr>';})
.join('\n'); }
</script>
</head>
<body>
<h2>Hey, this is my fabulous "dynamic" html page!</h2>
<table id="main"></table>
</body>
</html>
I got my inspiration from here: Javascript - read local text file .
I use JavaScript to dynamically create a table. In the picture below, You can see there are 5 horizontal borders. I want to assign each horizontal border an id. For instance, I want to assign the the top border an id of 0; the second top border an id of 1, etc. The code that I wrote is actually assigning the id of each row which is not what I want. When I run my code, I can see the second row shakes rather than the second horizontal border shakes. Basically, I want to create 5 horizontal lines and assign each line a id. Maybe creating a table to get 5 lines is a overkill. Hope someone could help me out. Thank you in advance.
html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="code.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="code_js.js"></script>
</head>
<body>
</body>
</html>
/* css: */
.deco {
border: 1px solid black;
}
table {
border-collapse:collapse;
border: 1px solid black;
}
table, td, th {
border: 1px solid black;
padding: 10px 20px;
}
js:
$(document).ready(function() {
var table = document.createElement('table');
for (var i = 0; i < 5; i++){
var tr = document.createElement('tr');
var td1 = document.createElement('td');
tr.appendChild(td1);
table.appendChild(tr);
td1.id = i;// id placed
td1.className = "deco";
}
document.body.append(table);
$('#' + 1).effect("shake");
});
Yes, creating a table just for drawing horizontal lines is an overkill. You can use <hr> tag instead. Just like you have created 5 rows in a table, create 5 <hr. Also, you won't need any CSS decoration.
$(document).ready(function() {
for (var i = 0; i < 5; i++) {
var hr = document.createElement('hr');
hr.id = "hr" + i;
document.body.append(hr);
}
$('#hr' + 1).effect("shake");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Shaking line</h1>
</body>
</html>
I've been on this for hours - I can't figure out which part of my code that is wrong.I managed to make and display a proper table when I run my code but I want to be able to make my table like this - http://www.codeproject.com/Articles/194916/Enhancing-HTML-tables-using-a-JQuery-DataTables-pl#Introduction
So I try using Datatable jquery plugin. So far no luck. Please, I would greatly appreciate your help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://d3js.org/d3.v2.js"></script>
<style>
table {
border-collapse: collapse;
border: 2px black solid;
font: 12px sans-serif;
}
td {
border: 1px black solid;
padding: 5px;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript"charset="utf-8">
d3.text("file.csv", function (datasetText) {
var rows = d3.csv.parseRows(datasetText);
var tbl = d3.select("#container")
.append("table")
.attr("id","tableID");
// headers
tbl.append("thead").append("tr")
.selectAll("th")
.data(rows[0])
.enter().append("th")
.text(function(d) {
return d;
});
// data
tbl.append("tbody")
.selectAll("tr").data(rows.slice(1))
.enter().append("tr")
.selectAll("td")
.data(function(d){return d;})
.enter().append("td")
.text(function(d){return d;})
});
$(document).ready(function() {
$('#tableID').dataTable();
} );
</script>
</body>
<html>
Look at the browser console for any errors and mention them here, if you can't interpret them by yourself. It says that the dataTables function is unknown, which is caused by the fact, that you include two different jquery versions. I'm guessing the 2nd include of jquery replaces the inital namespace with the dataTables plugin defined.
The dataTables plugin should not be called outside the CSVs callback function. If loading the csv & execution the callback takes too long, the $('#tableID').dataTable(); is called before the DOM is even there. Move it inside the callback.
$(document).ready(function() {
d3.text("file.csv", function (datasetText) {
// draw d3 elements
$('#tableID').dataTable();
});
});
I tried to export jchartfx to canvas using html2canvas.js but it only converts other attributes into canvas but svg element is displayed as blank area. here is my code.
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Using an existing canvas to draw on</title>
<style>
canvas {
border: 1px solid black;
}
button {
clear: both;
display: block;
}
#content {
background: rgba(100, 255, 255, 0.5);
padding: 50px 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/jchartfx.attributes.css" />
<link rel="stylesheet" type="text/css" href="css/jchartfx.palette.css" />
<script type="text/javascript" src="./js/jchartfx/jchartfx.system.js"></script>
<script type="text/javascript" src="./js/jchartfx/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="./js/jchartfx/jchartfx.advanced.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/exportLibrary.js"></script>
<style>
.exportChart{}
.exportTable{max-width:700px;border:1px solid blue; margin:2px;}
</style>
<script type="text/javascript" >
var chart1;
function loadChart(){
chart1 = new cfx.Chart();
chart1.setGallery(cfx.Gallery.Pie);
var title;
title = new cfx.TitleDockable();
title.setText("Sample Demo");
chart1.getTitles().add(title);
var divHolder = document.getElementById('ChartDiv1');
PopulateCarProduction(chart1);
chart1.create(divHolder);
}
function PopulateCarProduction(chart) {
var items = [{
"Proportion": 70,
"Month": "Jan"
}, {
"Proportion": 30,
"Month": "Feb"
}];
chart.setDataSource(items);
}
</script>
</head>
<body onload="loadChart()">
<div><h1>HTML content to render:</h1>
<div id="content">
<div class="exportChart" id="ChartDiv1" style="width:600px;height:400px"></div>
<div class="exportTable" id="TableDiv1" style="width:600px;">
<table id="table1" >
<tr><th style="color:#f0f">1Column one</th><th>Column Two</th><th>Column one</th><th>Column Two</th><th>Column Two</th></tr>
<tr><td>Data11</td><td>Data12</td><td>Data11</td><td>Data12</td><td>Data12</td></tr>
<tr><td> Data21</td><td>Data22 </td><td> Data21</td><td>Data22 </td><td>Data22 </td></tr>
<tr><td> Data31</td><td>Data32 </td><td> Data31</td><td>Data32 </td><td>Data32 </td></tr>
</table>
</div>
</div>
</div>
<h1>Existing canvas:</h1>
<canvas width="1000" height="800"></canvas>
<script type="text/javascript" src="tableexport/html2canvas.js"></script>
<button>Run html2canvas</button>
<script type="text/javascript">
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
document.querySelector("button").addEventListener("click", function() {
html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function(canvas) {
console.log('Drew on the existing canvas');
});
}, false);
</script>
</body>
</html>
The table is converted into canvas but svg is not converted. i need to convert svg to canvas with styles.
Here is the generated output.
It's due to security constraints. If a SVG contains any external references (foreignObject such as image data, css etc.) the browser will not allow the SVG to be drawn.
For security purposes, Gecko places some restrictions on SVG content
when it's being used as an image:
External resources (e.g. images, stylesheets) cannot be loaded, though they can be used if inlined through BlobBuilder [Blob] object URLs or
data: URIs.
[...]
Note that the above restrictions are specific to image contexts; they
don't apply when SVG content is viewed directly, or when it's embedded
as a document via the <iframe>, <object>, or <embed> elements.
Source
You could always save the SVG itself as an image, or if an absolute requirement, parse it using for example a library such as canvg.