I am trying to create a table of unique barcodes using node, bootstrap, and ejs. Here are the contents of my .ejs file:
<head>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode#3.11.4/dist/JsBarcode.all.min.js"</script>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Employee</th>
</tr>
</thead>
<tbody>
<% employeeObj.forEach(function(obj) { %>
<tr>
<td><%= obj.id %><svg id="barcode"></svg><script>var employee = '<%= obj.id %>'; JsBarcode("#barcode", employee);</script></td>
</tr>
<% }); %>
</tbody>
</table>
</body>
</html>
For some reason in each row of the table the barcode is being generated, but every barcode is the exact same value. I tried just putting the string value of obj.id in each row and it displays the different values fine.
What am I doing wrong?
I realized my issue was that the id for every barcode was the same which resulted in the same barcode being display multiple times. The solution to this problem is to have a unique id which could be accomplished like this:
id="<%=obj.id%>"
Related
I want to use the "Flat Json"-Bootstrap 5 Table example. [Link][1]
I am using expressjs with nodejs and ejs.
My Code so far:
```<link href="https://unpkg.com/bootstrap-table#1.18.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.18.1/dist/bootstrap-table.min.js"></script>
<body>
<h2>JOB DASHBOARD</h2>
<table id="table" data-toggle="table" data-flat="true" data-search="true" >
<thead>
<tr>
<th data-field="" data-sortable="true">Order ID</th>
<th data-field="" data-sortable="true">Liefertermin</th>
<th data-field="" data-sortable="true">Fertigstellungstermin</th>
<th data-field="" data-sortable="true">Keyline Nr</th>
</tr>
</thead>
<tbody>
<% var count = 0; %>
<% orders.forEach((order)=>{ %>
<tr data-index="<%= count %>">
<td><%= order.order_id %></td>
<td><%= order.due_at %> </td>
<td><%= order.deliver_at %> </td>
<td><%= order.keyline_obj.event.data.attributes.reference %> </td>
</tr>
<% count +=1; %>
<% }) %>
</tbody>
</table>
</body>
</html>```
I am loading the content from my mongoDB Database. The Variable "orders" is an array of order documents.
At the moment the data is loading but the searchfield doesnt appear at all and all the styling doesnt work although I have loaded the bootsrap css and js.
[1]: https://examples.bootstrap-table.com/index.html?bootstrap5#welcomes/flat-json.html
i think the problem is that the is successfully sent but the respond is in json as the browser waiting
you can check data is received or not by => clicking right click on the screen =>press inspect => Network => click on the page file => then choose Response
you will find your html page with the updated data in it
you can render it from your js script after fetching api like so
await fetch(----your fetching code-----).then(res=>{
document.open();
res.text().then(function(text) {
document.write(text)
});
})
I am trying to download table HTML using table2excel plugin.
I can download all column in table with this code:
<table id="empTable">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>01</td>
<td>Alpha</td>
<td>37</td>
<td>Bandung</td>
</tr>
<tr>
<td>02</td>
<td>Bravo</td>
<td>29</td>
<td>Bali</td>
</tr>
</table>
<script>
$(document).ready(function () {
$("#empTable").table2excel({
filename: "Employees.xls"
});
});
</script>
I am success to download table with all column (ID, Name, Age, Address). How to download as excel partial of column table? I only want to download column ID, Name, and Age without column Address. How should I do?
table2excel has an option to exclude cells that contain a specified class. In the example below, I add the noExport class to the cells I don't want to export. They are ignored when the file is created.
$(document).ready(function() {
$('#export').on('click', function(e){
$("#table").table2excel({
exclude: ".noExport",
name: "Data",
filename: "Workbook",
});
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>
<button id="export">Export</button>
<table id="table">
<thead>
<tr>
<td class="noExport">This cell won't be exported.</td>
<td>This cell will get exported.</td>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem</td>
<td class="noExport">Ipsum</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
</tbody>
</table>
Admittedly, this could get tedious to do for an entire column. Fortunately, a GitHub user forked table2excel and made a modification that allows you to specify which columns you want to export.
See: https://github.com/davidkonrad/table2excel
Using his version of table2excel, it'd look something like this:
$(document).ready(function() {
$('#export').on('click', function(e){
$("#table").table2excel({
exclude: ".noExport",
name: "Data",
filename: "Workbook",
columns: [0, 1, 2] // export first three columns
});
});
});
Note that there does appear to be a bug with opening table2excel workbooks in some versions of Excel. You might get a warning saying the file extension doesn't match. But if you ignore this warning, it should load in Excel without further issue.
I am looking for a solution for my EJS template. I am working on a project and I have completed about 50% of it. Currently I am working on a web page where I have to display the SQL data into EJS web template.
I have posted my coding which is i am working on it.
data is receiving from database (I checked with console.log and I posted the Json out put).
I tried all the possible ways to work it out but I did not get the result. It would be great if someone could help me..
Thanks in advance.
/* app.js */
app.get('/data', receiveData);
function receiveData(req, res)
{
db.executeSql("SELECT * FROM arduino", function (recordsets, err, ) {
var data = JSON.stringify(recordsets);
if (err) {
httpMsgs.show500(request, res, err);
}
else {
var Jdata = JSON.parse(data);
res.render('arduino',{Jdata:Jdata});
console.log(data);
}
});
}
/* arduino.ejs */
<html>
<head>
<body>
<div class="page-data">
<div class="data-table">
<table border="1" cellpadding="7" cellspacing="7">
<tr>
<th> - </th>
<th>ID</th>
<th>Machine</th>
<th>Start Time</th>
<th>End Time</th>
<th>Length Time</th>
<th> Day/Night</th>
<th>Job Number</th>
</tr>
<% if(Jdata.length){
for(var i = 0;i < Jdata.length;i++) { %>
<tr>
<td><%=(i+1)%></td>
<td> </td>
<td><%=Jdata[i].Machine%></td>
<td><%=Jdata[i].StartTime%></td>
<td><%=Jdata[i].EndTime%></td>
<td><%=Jdata[i].LengthTime%></td>
<td><%=Jdata[i].Day%></td>
<td><%=Jdata[i].ID %></td>
<td><%=Jdata[i].JobNumber %></td>
</tr>
<% }
}else{ %>
<tr>
<td colspan="3">No Data</td>
</tr>
<% } %>
</table>
</div>
</div>
</body>
</head>
</html>
{"recordsets":[[{"ID":1,"Machine":"TRUMPF 5000","StartTime":"2018-11-01T15:28:51.000Z","EndTime":"2018-11-01T15:52:11.000Z","LengthTime":271,"Day":"Day","JobNumber":null}]]
Why for loop is not working , but on individual data it works.
I'm trying to fetch 3 inputs from the api, book name , author name and subject.
<table class="table table-bordered">
<h1 align="center">List of Science Book Records</h1>
<thead>
<tr>
<th>Book Name</th>
<th>Author Name</th>
<th>Publish Date</th>
</tr>
</thead>
<tbody class="mypanel">
<script>
$.getJSON('https://openlibrary.org/subjects/science.json', function(data) {
for (var i=0;i<data.length;i++) {
console.log("hii");
var text = `<tr><td>${data.works[i].title}</td>
<td>${data.works[i].authors[i].name}</td>
<td>${data.name}</td></tr>`
$(".mypanel").html(text);
}
});
</script>
</tbody>
</table>
You should looping data.works instead. Check the following snippet.
I'm assuming that data.works[i].autors has only one position, if not, you can loop them as well.
Finally prepend to the div with class myPanel.
Hope it helps.
$.getJSON('https://openlibrary.org/subjects/science.json', function(data) {
for (var i=0;i<data.works.length;i++) {
var text = `<tr><td>${data.works[i].title}</td>
<td>${data.works[i].authors[0].name}</td>
<td>${data.name}</td></tr>`
$(".mypanel").append(text);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<h1 align="center">List of Science Book Records</h1>
<thead>
<tr>
<th>Book Name</th>
<th>Author Name</th>
<th>Genre</th>
</tr>
</thead>
<tbody class="mypanel">
Judging from JSON structure that you have, you're iterating over the length of an object data which is undefined.
In order to show the list of works you need to iterate over the length of works so your loop will look like this
for (var i = 0; i < data.works.length; i++) {
// do stuff with data.works[i]
}
And also you can use append in each iteration of the loop OR you can summarize all text, and then append it after the loop, by doing
text += `<tr><td>${data.works[i].title}</td>
<td>${data.works[i].authors[i].name}</td>
<td>${data.name}</td></tr>`;
But don't forget to define variable text before the loop.
in this code html table tag not accepted.i don't why within codes i have tried but result not came i want the table format with border style.html within code also tried
this is my html table :
let mailOptions = {
from: 'aaaaaaaaa',
to: 'bbbbbbbbbb',
subject: 'Test',
html:`<html><head>
<body>
<table>
<tr>
<th>Id </th><th>Templatename</th>
<th>Description</th>
<th>TemplateContent</th>
<th>Active</th>
</tr>
<tr>
<td>streamingTemplate.id.toString()</td>//here the table data should be a database not the defined one.
<td>streamingTemplate.template_name.toString()</td>
<td>streamingTemplate.description.toString()</td>
<td>streamingTemplate.template_content.toString()</td>
<td>streamingTemplate.is_active.toString()</td>
</tr>
</table>
</body>
</head></html>`
};
Your <table> tag is inside a <head> tag.
Change your structure to this :
<html>
<head>
</head>
<body>
<table></table>
</body>
</html>
You have a space character inside your <table> tag. It is <table > instead of <table>