I have a table in my nodeJS project that has data with a status. I would like to show this status in red and green. To render the HTML page I use EJS.
I've already tried using an if/else statement, but there I always get the first value of the statement.
MySQL:
SELECT g_id, g_name, g_status FROM games
EJS:
<table class="table table-hover">
<thead>
<tr class="table-info">
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<% if (data) {
data.forEach(function(game){
var status = game.g_status;
if (status = '1') {
status = 'color-green';
} else {
status = 'color-red';
}
%>
<tbody id="myTable">
<tr>
<td><%= game.g_name %></td>
<td><%= status %></td>
</tr>
</tbody>
<% }) %>
<% } %>
</table>
What's the problem, and how do I get the SQL output to a specific colour?
use ternary condition like this way :
<table class="table table-hover">
<thead>
<tr class="table-info">
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<% if (data) {
data.forEach(function(game){ %>
<tbody id="myTable">
<tr>
<td><%= game.g_name %></td>
<td><%= game.g_status=='1'?'color-green':'color-red' %></td>
</tr>
</tbody>
<% }) %>
<% } %>
well.
there is many places to look for.
read on equals operator in JavasScript
status is not part of the list, just app variable
create function returning color for given status
Related
I wrote a JSP to get data from server and list as table. The code is below:
<script type="text/javascript">
var thislist;
</script>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Address</th>
</tr>
</thead>
<tbody>
<%
int index = 1;
getCustomers ActionGet = new getCustomers();
List list = ActionGet.getCustomer();
Iterator it = list.iterator();
while (it.hasNext()) {
Customer customer = (Customer) it.next();
%>
<tr>
<th scope="row"><%=index++%></th>
<td><%=customer.getName()%></td>
<td><% if (customer.getAddress().length()>10) { %><%=customer.getAddress().substring(0,10) %><% } else { %>
<%=customer.getAddress() %><% } %></td>
</tr>
<%
}
%>
</tbody></table>
It only list the first 10 characters of address, Now I want to create a modal to view the whole address. To do that I want to create object array to store the whole address value ? Any hint? Thx.
Iam facing the error Cannot read property 'forEach of undefined' for two days long and I just coudn't solve the problem. Your help would be very helpful. The code below
bruidstaart.js page where I want to show some data
<div class="table-wrapper">
<table class="table table-hovered">
<thead class="thead-dark">
<tr>
<th scope="col">Image</th>
<th scope="col">Bruidstaartnaam</th>
<th scope="col">Aantalpersonen</th>
</tr>
</thead>
<tbody>
<% bruidstaarten.forEach((bruidstaart, user) => { %>
<tr>
<td><img src="/assets/bruidstaartenmap/<%= bruidstaart.image %>" class="rounded-circle player-img" alt="" width="200" height="200"></td>
<td><%= bruidstaart.bruidstaartnaam %></td>
<td><%= bruidstaart.aantalpersonen %></td>
</tr>
<% }) %>
</tbody>
</table>
</div>
index.js
exports.bruidstaartenPage = function(req, res, next){
var sql1 = "SELECT * FROM `bruidstaarten` ORDER BY id ASC"; // query database to get all the players
db.query(sql1, function(err, result){
res.render('bruidstaartenPage', {bruidstaarten:result});
});
};
I figure it out by checking the query and the tabel in the database. id was wrong by creating the tabel
I have the following code in my server.js:
app.get('/animal/:id', function (request, response)
{
Animal.find({_id: request.params.id}, function(err, animals)
{
response.render('animal', { animals: animals });
})
})
I am trying to get the animal id to show up in the template url.
<table border='1'>
<tr>
<th>Name</th>
<th>Actions</th>
</tr>
<% for (var i in animals){ %>
<tr>
<td><a href='/animal/?id=**ID RIGHT HERE** %>><%= animals[i].name %></a></td>
<td><a href='#'>Edit</a> <a href='#'>Delete</a></td>
</tr>
<% } %>
</table>
If I just put in animals[i]._id, it treats as a string, but if I write it as <%= animals[i]._id %>, the whole column is removed.
use the expression, you shouldn't send this as query.
<%= animals[i]._id %> will be used as params id in your server.js and the <%= animals[i].name %> as anchor tag name
<table border='1'>
<tr>
<th>Name</th>
<th>Actions</th>
</tr>
<% for (var i in animals){ %>
<tr>
<td><a href='/animal/<%= animals[i]._id %>'><%= animals[i].name %></a></td>
<td><a href='#'>Edit</a> <a href='#'>Delete</a></td>
</tr>
<% } %>
</table>
I am trying to implement dynamically show hide columns in rails using dataTable plugin.
The show Hide button is visible but when I uncheck a column it is not disappearing from the table. The column should appear only when I click on check mark true, if I uncheck it it should be not in the columns list.
Please help me how to fix this!.
_merchent.html.erb # partail file
<div id="merchant_list" class="panel-body">
<div class="table-success">
<table id = "table_id" class="table table-bordered">
<thead>
<tr>
<th>Merchant</th>
<th>Bank Name</th>
<th>Payment Gateway</th>
<th>Status</th>
<th>Amount</th>
<th>Discount</th>
<th>Additional Charges</th>
<th>Added On</th>
</tr>
</thead>
<tbody id="details">
<% #all_settlement_details.each do |sd| %>
<tr>
<td><%= sd.merchantname %></td>
<td><%= sd.bank_name %></td>
<td><%= sd.payment_gateway %></td>
<td><%= get_status(sd.status) %></td>
<td><%= sd.amount %></td>
<td><%= sd.discount %></td>
<td><%= sd.additional_charges%></td>
<td><%= get_added_on_date sd.addedon %></td>
</tr>
<% end %>
</tbody>
</table>
<div id="align">
Load more...
</div>
</div>
</div>
</div>
merchant.js file
$(document).ready(function(){
$('#table_id').DataTable({
"dom": 'C>"clear"<lfrtip',
paging: false,
searching: false
});
Please see the corresponding image as well.
Have you looked at http://www.datatables.net/examples/api/show_hide.html?
$(document).ready(function() {
var table = $('#example').DataTable( {
"scrollY": "200px",
"paging": false
} );
$('a.toggle-vis').on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
} );
} );
We need to see your code that is attached to the checkboxes to know further what you problem could be.
After few hours, I finally figured out the solution.!
Everything is fine but the datatable libraries that I included were out dated. So I changed those two libraries. Now it is working.
http://cdn.datatables.net/colvis/1.1.1/css/dataTables.colVis.css
http://cdn.datatables.net/colvis/1.1.1/js/dataTables.colVis.min.js
I am working with Rails, and using JavaScript as well. I am having trouble getting Javascript function for the multiple tr in my table. I am using bootstrap to display my modal and everything works fine for the first tr, but it doesn't function for the others:
<script type = "text/javascript">
$(function(){
$("#btn-show-modal").click(function(e){
$("#dialogue-example").modal('show');
});
$("#btn-close-modal").click(function(c){
$("#dialogue-example").modal('hide');
});
});
</script>
<table class="table table-striped">
<thead>
<tr>
<th>Brand</th>
<th>description</th>
<th>Rate</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<% #products.each do |product| %>
<tr id ="btn-show-modal">
<td><%= product.brand %></td>
<td><%= product.short_description %></td>
<td><%= product.rate_amount %></td>
<td><%= product.created_at %></td>
<% name = product.name %>
<% description = product.description %>
</tr>
</tbody>
<% end %>
</table>
#BenjaminGruenbaum wrote in a comment:
IDs are unique (and can be only used on one element), use classes instead.