I'm using Node.js with bootstrap 4 and to display data in ejs file, I used bootstrap table from this link.
https://datatables.net/examples/styling/bootstrap4.html
The Issue is then I put static data in table it works fine. But when I fetch from database(MySql) and going to print data. Data print's fine but search and pagination not active/display.
When page load I have set this code to active it.
<script>
$(document).ready(function () {
$('#example').DataTable({
"paging": true,
"ordering": true,
"info": false
});
});
</script>
And in table I print data in this way.
<tbody>
<% if(data.length > 0) { %>
<% for(var i = 0 ; i < data.length ; i++){ %>
<tr>
<td>
<%= i+1 %>
</td>
<td>
<%= data[i].customer_name %>
</td>
</tr>
<% } %>
<% } %>
</tbody>
As I look into your code, Every thing looks good. I have a sample working code in same situation. It may help you.
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Index</th>
<th>Your_header_name</th>
</tr>
</thead>
<tbody>
<% if(data.length > 0) { %>
<% for(var i = 0 ; i < data.length ; i++){ %>
<tr>
<td>
<%= i+1 %>
</td>
<td>
<%= data[i].filed_name %>
</td>
</tr>
<% } %>
<% } %>
</tbody>
</table>
Related
I have operator Collection in mongoDB. And I want to get all information in ejs table so I wrote below codes. But I get error with operators.forEach is not a functions How can I solve this problem ?
This is Collection model:
const operatorSchema = new Schema({
operatorName: {
type: String
},
productsSerialNumber:[{productSerialNumbers: String}],
operatorSerialNumber: {
type: Number
},
users:[{
email:String,
payment:Number,
paymentsData: Date,
}],
operatorState:{
type: Boolean,
}
});
And this is the query function:
exports.getOperatorInformations = (req, res, next)=>{
Operators.find({},function(err,docs){
docs.forEach(function(dataCatch){
console.log(dataCatch.users)
res.render('home',{operators: dataCatch});
})
})
}
}
And ejs file part:
<% operators.forEach(function(data){ %>
<tr>
<td>
<%= data.operatorName %>
</td>
<td>
<%= data.productsSerialNumber %>
</td>
<td>
<%= data.productsSerialNumber %>
</td>
<% })%>
<% data.users.forEach(function(data){ %>
<td>
<%= data.users.email %>
</td>
<td>
<%= data.users.paymentsData %>
</td>
<td>
<!-- <%= data.users.payment %> -->
</td>
</tr>
<% })%>
</tr>
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 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}]]
I'm trying to get selected rows from a table in express js.
Here is a html+ejs table code I have in my ejs view file. I'm trying to get only the rows where the checkbox is checked.
<table class="table">
<thread class = "thread-inverse">
<tr>
<th>Item Id</th>
<th>Name</th>
<th>Category</th>
<th>Manufacturer</th>
<th>Supplier</th>
<th>Buying Price</th>
<th>Selling Price</th>
<th>Action</th>
</tr>
<% for(var i =0; i < itemList.length; i++){%>
<tr>
<td><%= itemList[i].productId %></td>
<td><%= itemList[i].itemName %></td>
<td><%= itemList[i].category %></td>
<td><%= itemList[i].manufacturer %></td>
<td><%= itemList[i].supplier %></td>
<td><%= itemList[i].buyingPrice %></td>
<td><%= itemList[i].sellingPrice %></td>
<td><input type="text" name="quantity""></td>
<td><input type="checkbox" name="productId" value="<%= itemList[i].productId %>"> | ADD </td>
</tr>
<% } %>
</thread>
</table>
I have tried several things but nothing is working..
Can anyone please give me a solution ?
Modify your code a bit,
//HTML
//add a **onclick** listener on checkbox
<td><input type="checkbox" class="checkbox" name="productId" value="<%= itemList[i].productId %>"> | ADD </td>
//In java script file
$('.checkbox').click(function() {
var productId = $(this).closest("tr").find('td:eq(0)').text();
//changing td:eq(x) will give you corresponding clicked row's cell
}
I tried with the following way, and works well.
Modify the code snippet by adding class name to :
<% for(var i =0; i < itemList.length; i++){%>
<tr class="tbl-item">
...
<% } %>
And implement the click function:
$(".checkbox").each(function(index) {
$(this).click(function(e) {
let item = $(".tbl-item")[index];
console.log(item);
}) ;
})
Then the console will show the desired tag data and you can get every item like:
item.children[4].innerText
Thanks.
I have codes in EJS below,
<table>
<% for(var i=0; i < data.length; i++) { %>
<tr>
<td><%= data[i].id %></td>
<td><%= data[i].name %></td>
</tr>
<% } %>
</table>
My data is like this:
[{"id":1,"name":"bob",description:[{"name":"carol","url":"www.hp.com"},{"name":"katy","url":"www.desktop.com"}]},{"id":2,"name":"john"description:[{"name":"raya","url":"www.usus.com"},{"name":"fat","url":"www.mia.com"}]}]"
I can manipulate the row to populate the table in JS => id and name but i cannot do that to description: name , url
This will output the following table (using the example data from above):
<table>
<tr>
<td>1</td>
<td>bob</td>
<td>name</td>
<td>url</td>
</tr>
<tr>
<td>2</td>
<td>john</td>
</tr>
<tr>
<td>3</td>
<td>jake</td>
<td>name</td>
<td>url</td>
</tr>
</table>
Helps appreciated.
Regards
This is because the "description" is an array. So you can use a nested loop to access its data:
<table>
<% for(var i=0; i < data.length; i++) { %>
<tr>
<td><%= data[i].id %></td>
<td><%= data[i].name %></td>
<td><% for(var j=0; j < data[i].description.length; j++) { %>
<p><%=data[i].description[j].name%></p>
<% } %></td>
</tr>
<% } %>
</table>