I work for a charity who are google cloud based. They have limited resources and no SQL database, I have been asked to develop a searchable telephone directory that sits on our intranet.
Please see the code.gs below:
function doGet(e){
var ss = SpreadsheetApp.openById('sheetId');
var sheet = ss.getSheetByName('Staff');
var range = sheet.getDataRange();
var values = range.getValues();
var holderArray = [];
var HTMLTemp = HtmlService.createTemplateFromFile('index');
Logger.log(values);
var holder = '';
for(x=1; x<values.length; x++){
holderArray.push({
"firstname" : values[x][0],
"lastname" : values[x][1],
"service" : values[x][2],
"role" : values[x][3],
"location" : values[x][4],
"deskphone" : values[x][5],
"mobilephone" : values[x][6],
"email" : values[x][7]
});
}
HTMLTemp.data = holderArray;
var html = HTMLTemp.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
function myFunction1(){
var ss = SpreadsheetApp.openById('sheetid');
var sheet = ss.getSheetByName('Staff');
var range = sheet.getDataRange();
var values = range.getValues();
var holderArray = [];
var HTMLTemp = HtmlService.createTemplateFromFile('index');
Logger.log(values);
var holder = '';
for(x=1; x<values.length; x++){
holderArray.push({
"firstname" : values[x][0],
"lastname" : values[x][1],
"service" : values[x][2],
"role" : values[x][3],
"location" : values[x][4],
"deskphone" : values[x][5],
"mobilephone" : values[x][6],
"email" : values[x][7]
});
}
HTMLTemp.data = holderArray;
var html = HTMLTemp.evaluate().setWidth(1020).setHeight(800);
SpreadsheetApp.getUi().showModalDialog(html, 'Title');
I will be deploying this as a web app, and have included the index.html below too:
<script>
var datags = <?!= JSON.stringify(data) ?>;
</script>
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
</head>
<body>
<div style="padding: 5px 20px; width: 50%;">
<header class="text-center" style="padding: 15px;">
<h1>Age UK Essex Staff Directory</h1>
</header>
<input type="text" id="filter"/>
<input type="button" id="btnFilter" value="Filter" />
<table id="myTable" class="table table-striped" style="margin-top: 10px;">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Service</th>
<th>Role</th>
<th>Location</th>
<th>Desk Phone</th>
<th>Mobile Phone</th>
<th>Email</th>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
console.log(datags);
jQuery.each(datags, function() {
console.log(this);
$('#myTable tr:last').after('<tr style="font-size: 12px; font-family: arial;"><td>'+this.firstname+'</td><td>'+this.lastname+'</td><td>'+this.service+'</td><td>'+this.role+'</td><td>'+this.location+'</td><td>'+this.deskphone+'</td><td>'+this.mobilephone+'</td><td>'+this.email+'</td></tr>')
})
});
</script>
<script>
$(document).ready(function() {
$("#btnFilter").click(function() {
$("#myTable tr").show();
if($("#filter").val.length > 0) {
$("#myTable tr").filter(function(index, elm) {
return $(elm).html().toUpperCase().indexOf($("#filter").val().toUpperCase()) < 0;
}).hide();
}
});
});
</script>
</body>
</html>
This works for the most part although when I remove the seacrh criteria I'd prefer it if the content returned to normal rather than staying on the results of the previous seatch.
You can use setInterval to run the filter function, every X milliseconds.
Modify your HTML to the following for example:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div style="padding: 5px 20px; width: 50%;">
<header class="text-center" style="padding: 15px;">
<h1>Age UK Essex Staff Directory</h1>
</header>
<input type="text" placeholder="Filter directory..." id="filter" />
<input type="button" id="btnFilter" value="Filter" />
<table id="myTable" class="table table-striped" style="margin-top: 10px;">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Service</th>
<th>Role</th>
<th>Location</th>
<th>Desk Phone</th>
<th>Mobile Phone</th>
<th>Email</th>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var datags = <?!= JSON.stringify(data) ?> ;
console.log(datags);
function initialize() {
jQuery.each(datags, function() {
$('#myTable tr:last').after('<tr style="font-size: 12px; font-family: arial;"><td>'
+ this.firstname + '</td><td>'
+ this.lastname + '</td><td>'
+ this.service + '</td><td>'
+ this.role + '</td><td>'
+ this.location + '</td><td>'
+ this.deskphone + '</td><td>'
+ this.mobilephone + '</td><td>'
+ this.email + '</td></tr>'
)
});
}
function filter() {
$("#myTable tr").show();
if ($("#filter").val.length > 0) {
$("#myTable tr").filter(function(index, elm) {
return $(elm).html().toUpperCase().indexOf($("#filter").val().toUpperCase()) < 0;
}).hide();
}
}
$(document).ready(
function() {
initialize();
$("#btnFilter").click(filter);
setInterval(filter, 1000);
}
);
</script>
</body>
</html>
References:
JS built in function setInterval
You can create a filter on your table:
Just mark the area where your data is and go to "Data" -> "Filter"
But I don't know if there's a better solution with google cloud.
Related
Here, the coding that I got from the Stack Overflow page. The window.location should go to next page by id, but I do not know how to code it.
function addRowHandlers() {
var table = document.getElementById("employee-click");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler =
function(row) {
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
window.location.href = "detail.php";
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
}
This is my html code. Would you help me with this code?
<!DOCTYPE html>
<html>
<title>Data Biodata</title>
<head>
<meta name="author" content="Arkaprava majumder" />
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var dataTable = $('#employee-grid').DataTable({
processing: true,
serverSide: true,
ajax: "dataBiodata.php", // json datasource
});
$("#employee-grid_filter").css("display", "none"); // hiding global search box
$('.employee-search-input').on('keyup click change', function() {
var i = $(this).attr('id'); // getting column index
var v = $(this).val(); // getting search input value
dataTable.columns(i).search(v).draw();
});
});
function addRowHandlers() {
var table = document.getElementById("employee-click");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler =
function(row) {
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
window.location.href = "detail.php";
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
</script>
<style>
div.container {
max-width: 980px;
margin: 0 auto;
cursor: pointer;
}
div.header {
margin: 0 auto;
max-width: 980px;
}
body {
background: #f7f7f7;
color: #333;
}
.employee-search-input {
width: 100%;
}
</style>
</head>
<body onload="addRowHandlers()">
<div class="header">
<h1>Data Biodata</h1>
</div>
<div class="container">
<!-- <center> <button style="right:150"> Create New</button></center>-->
<table id="employee-grid" class="display" cellpadding="5" cellspacing="1" width="100%" border="1" style="text-align: justify;">
<thead>
<tr>
<th>No</th>
<th>Year</th>
<th>System</th>
<th>Courses</th>
<th>SVC No</th>
<th>Pangkat</th>
<th>Name</th>
</tr>
</thead>
<thead>
<tr>
<td><input type="text" id="0" class="employee-search-input"></td>
<td><input type="text" id="1" class="employee-search-input"></td>
<td><input type="text" id="2" class="employee-search-input"></td>
<td><input type="text" id="3" class="employee-search-input"></td>
<td><input type="text" id="4" class="employee-search-input"></td>
<td><input type="text" id="5" class="employee-search-input"></td>
<td><input type="text" id="6" class="employee-search-input"></td>
</tr>
</thead>
<tbody id="employee-click">
<tr>
<th>No</th>
<th>Year</th>
<th>System</th>
<th>Courses</th>
<th>SVC No</th>
<th>Pangkat</th>
<th>Name</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I dont know which id you mean for redirecting. But I think you should change your addRowHandlers function to this. Obtain and use your mentioned id and use it after alert.
function addRowHandlers() {
var tbody = $("#employee-click tr"); //document.getElementById("employee-click");
tbody.each(function() {
$(this).on('click', function() {
alert("hi");;
// window.location.href = "";
})
})
}
final code is
$(document).ready(function() {
var dataTable = $("#employee-grid").DataTable({
processing: true,
serverSide: true,
ajax: "dataBiodata.php" // json datasource
});
$("#employee-grid_filter").css("display", "none"); // hiding global search box
$(".employee-search-input").on("keyup click change", function() {
var i = $(this).attr("id"); // getting column index
var v = $(this).val(); // getting search input value
dataTable
.columns(i)
.search(v)
.draw();
});
});
function addRowHandlers() {
var tbody = $("#employee-click tr"); //document.getElementById("employee-click");
tbody.each(function() {
$(this).on('click', function() {
alert("hi");;
// window.location.href = "";
})
})
}
div.container {
max-width: 980px;
margin: 0 auto;
cursor: pointer;
}
div.header {
margin: 0 auto;
max-width: 980px;
}
body {
background: #f7f7f7;
color: #333;
}
.employee-search-input {
width: 100%;
}
<html>
<title>Data Biodata</title>
<head>
<meta name="author" content="Arkaprava majumder" />
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body onload="addRowHandlers()">
<div class="header">
<h1>Data Biodata</h1>
</div>
<div class="container">
<!-- <center> <button style="right:150"> Create New</button></center>-->
<table id="employee-grid" class="display" cellpadding="5" cellspacing="1" width="100%" border="1" style="text-align: justify;">
<thead>
<tr>
<th>No</th>
<th>Year</th>
<th>System</th>
<th>Courses</th>
<th>SVC No</th>
<th>Pangkat</th>
<th>Name</th>
</tr>
</thead>
<thead>
<tr>
<td><input type="text" id="0" class="employee-search-input"></td>
<td><input type="text" id="1" class="employee-search-input"></td>
<td><input type="text" id="2" class="employee-search-input"></td>
<td><input type="text" id="3" class="employee-search-input"></td>
<td><input type="text" id="4" class="employee-search-input"></td>
<td><input type="text" id="5" class="employee-search-input"></td>
<td><input type="text" id="6" class="employee-search-input"></td>
</tr>
</thead>
<tbody id="employee-click">
<tr>
<th>No</th>
<th>Year</th>
<th>System</th>
<th>Courses</th>
<th>SVC No</th>
<th>Pangkat</th>
<th>Name</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>
This code is for printing a table and it's working fine but the problem is that when I click on print table button it prints the table but when I clicked it again it again prints the same table below I want it to not work again until the new input values are given. once it should print table and then don't until new values are given. I also want it to be more responsive.
<!DOCTYPE html>
<html>
<head>
<title>Multiplication Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>MultiplicationTable</h2
<form action>
Table Number:<br>
<input type="text" id="TN" name="TableNumber">
<br>
Initial Number:<br>
<input type="text" id="IN" name="InitialNumber">
<br>
Ending Number:<br>
<input type="text" id="EN" name="EndingNumber">
</form>
<br><br>
<button id="again" onclick="myTable()">Print Table</button>
<br><br>
<button id="Bordertoggle" onclick="Bordertoggle()">Add Alternate Row Style</button>
<tr>
<button id="Hovertoggle" onclick="Hovertoggle()">Add Hover Effect</button>
<br><br>
<!-- <table class="table table-bordered table-striped table-hover" id="displayTables">
</table> -->
<table class="table" id="displayTables" border="0">
<tr></tr>
</table>
<!-- <table class="table table-bordered table-striped table-hover" id="HoverTables" border="1">
<tr></tr>
</table> -->
<!-- <p id="MT"></p> -->
<script>
// function myFunction()
// {
// var text = "";
// var Number = document.getElementById("TN").value;
// var T;
// var I = document.getElementById("IN").value;
// var E = document.getElementById("EN").value;
// for (T = I; T <= E; T++) {
// text += Number + "*" + T + "=" + Number*T + "<br>";
// }
// document.getElementById("MT").innerHTML = text;
// }
// function generateTable()
// {
// //var myVar = prompt("A number?", "");
// var myVar = document.forms.multTables.x.value;
// var myString = "<tr><th>"+ myVar + " times tables</th></tr>";
// for (i=1; i<=myVar; i++)
// {
// myString += "<tr><td>";
// myString += i+ " x " +myVar+ " = " +(i*myVar)+ "\n";
// myString += "</td></tr>";
// }
// document.getElementById('t').innerHTML = myString;
// return false;
// }
function myTable()
{
var Number = document.getElementById("TN").value;
var T;
var I = document.getElementById("IN").value;
var E = document.getElementById("EN").value;
var temp="";
for (T = I; T <= E; T++) {
temp+="<tr><td>"+Number+"</td><td>*</td><td>" + T + "</td><td>=</td><td>" + Number*T +"</td></tr>";
}
$("#displayTables").append(temp);
}
function Bordertoggle() {
var element = document.getElementById("displayTables");
element.classList.toggle("table-bordered");
var change = document.getElementById("Bordertoggle");
if (change.innerHTML == "Add Alternate Row Style")
{
change.innerHTML = "Remove Alternate Row Style";
}
else {
change.innerHTML = "Add Alternate Row Style";
}
}
function Hovertoggle() {
var element = document.getElementById("displayTables");
element.classList.toggle("table-hover");
var change = document.getElementById("Hovertoggle");
if (change.innerHTML == "Add Hover Effect")
{
change.innerHTML = "Remove Hover Effect";
}
else {
change.innerHTML = "Add Hover Effect";
}
}
</script>
</body>
</html>
Just save the current value in variable and when next time user clicks check if value matches then don't print otherwise print.
var prevN, prevI, prevE; //store value in this variable of previous state
function myTable() {
var Number = document.getElementById("TN").value;
var T;
var I = document.getElementById("IN").value;
var E = document.getElementById("EN").value;
var temp = "";
if (prevN !== Number || prevE !== E || prevI !== I) { //here check if value is changed or not
prevN = Number;
prevE = E;
prevI = I;
for (T = I; T <= E; T++) {
temp += "<tr><td>" + Number + "</td><td>*</td><td>" + T + "</td><td>=</td><td>" + Number * T + "</td></tr>";
}
$("#displayTables").append(temp);
}
}
function Bordertoggle() {
var element = document.getElementById("displayTables");
element.classList.toggle("table-bordered");
var change = document.getElementById("Bordertoggle");
if (change.innerHTML == "Add Alternate Row Style") {
change.innerHTML = "Remove Alternate Row Style";
} else {
change.innerHTML = "Add Alternate Row Style";
}
}
function Hovertoggle() {
var element = document.getElementById("displayTables");
element.classList.toggle("table-hover");
var change = document.getElementById("Hovertoggle");
if (change.innerHTML == "Add Hover Effect") {
change.innerHTML = "Remove Hover Effect";
} else {
change.innerHTML = "Add Hover Effect";
}
}
<!DOCTYPE html>
<html>
<head>
<title>Multiplication Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>MultiplicationTable</h2 <form action>
Table Number:<br>
<input type="text" id="TN" name="TableNumber">
<br> Initial Number:<br>
<input type="text" id="IN" name="InitialNumber">
<br> Ending Number:<br>
<input type="text" id="EN" name="EndingNumber">
</form>
<br><br>
<button id="again" onclick="myTable()">Print Table</button>
<br><br>
<button id="Bordertoggle" onclick="Bordertoggle()">Add Alternate Row Style</button>
<tr>
<button id="Hovertoggle" onclick="Hovertoggle()">Add Hover Effect</button>
<br><br>
<!-- <table class="table table-bordered table-striped table-hover" id="displayTables">
</table> -->
<table class="table" id="displayTables" border="0">
<tr></tr>
</table>
<!-- <table class="table table-bordered table-striped table-hover" id="HoverTables" border="1">
<tr></tr>
</table> -->
<!-- <p id="MT"></p> -->
</body>
</html>
add a var to your ajavascript, like
printed = 0;
once you print your table, do
printed = 1;
Print only
if ( printed == 0 )
....print
?
Edit:
printed=0;
......
if(printed==0) {
$("#displayTables").append(temp);
printed=1;
}
I have a basic task list with due dates. The CSS script for showing overdue dates works. If I add new entries via the from input the css is not applied to overdue items. I have researched event delegation on here and adjusted code to include .on for delegation. Spent a long while trying to solve this but any help would be appreciated.
<head>
<script type="text/javascript">
$(document).ready(function() {
$(".add-row").on('click', function() {
var task = $("#task").val();
var date = $("#date").val();
var markup = "<tr><td>" + task + "</td><td>" + date + "</td></tr>";
$('table tbody').append(markup);
});
});
</script>
<script>
$(function() {
$('table td').each(function() {
var row_date =
Date.parse($(this).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/,
'$2/$1/$3'));
var now_date = new Date().getTime();
if (row_date < now_date) {
$(this).parent('tr').addClass('past');
}
});
});
</script>
</head>
<body>
<form>
<input type="text" id="task" placeholder="task" />
<input type="text" id="date" placeholder="dd/mm/yyyy" />
<input type="button" class="add-row" value="Add Row" />
</form>
<table id="task_table">
<thead>
<tr>
<th>Task</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mow lawn</td>
<td>01/02/2017</td>
</tr>
<tr>
<td>Clean car</td>
<td>01/02/2017</td>
</tr>
<tr>
<td>Empty bins</td>
<td>01/02/2018</td>
</tr>
</tbody>
</table>
<style>
#task_table tr.past {
background: #ff8a33;
}
</style>
</body>
</html>
I did a jsfiddle that gets you partially there. There's still an issue when you load, but that should get you going:
$(document).ready(function(){
$(".add-row").on('click',function(){
var task = $("#task").val();
var date = $("#date").val();
var markup = "<tr><td>" + task + "</td><td>" + date + "</td></tr>";
$('table tbody').append(markup);
checkDate();
});
function checkDate() {
$('table td').each(function() {
var row_date = Date.parse($(this).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$2/$1/$3'));
var now_date = new Date().getTime();
if(row_date < now_date) {
$(this).closest('tr').addClass('past');
}
});
}
});
jsfiddle
Try to apply the CSS to the cells in that row, not to the row itself:
#task_table tr.past td {
background: #FF8A33;
}
DataTables spring mvc support
I am using one Weblogic data source, I am ultimately attempting to retrieve one record at a time from the Weblogic data source and then display that record in a data table also one at a time. DataTables.net has an example called "add rows" but it does not accommodate using getting data from data sources. The empty data table displays on the webpage, I can see the query running correctly to the data source however the record is not displaying in the data table.
I included the following in my code:
<script src="<c:url value="/resources/js/jquery.js" />"></script>
<script src="<c:url value="/resources/js/jquery.min.js" />"></script>
<script src="<c:url value="/resources/js/jquery.dataTables.min.js" />"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css"/>
Snippet from CONTROLLER:
#RequestMapping(value = "/locate", method = RequestMethod.GET)
public #ResponseBody NewOrder getModelYearAndVehicleOrder(
#RequestParam(value="modelYear") String modelYear\,
#RequestParam(value="vehicleOrder\") String vehicleOrder\){
if (modelYear\.isEmpty() || vehicleOrder\.isEmpty())
throw new IllegalArgumentException("Try Again!");
NewOrder newOrder;
try {
newOrder= OrderRepo.findNewOrderByModelYearAndVehicleOrder(modelYear, vehicleOrder);
}
catch (Exception e){
#SuppressWarnings("deprecation")
Throwable _e = ExceptionUtils.getCause(e);
throw new ExceptionHandler(
DatabaseMessage.RETRIEVE_ERROR.toString(), _e.getMessage());
}
return newOrder;
}
HTML:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>
<h1>Template Spring MVC App</h1>
<form id= "locateVehicle">
<p> Model Year? <input id="modelYear" type="text" th:field="*{modelYear}" /> </p>
<p> Order? <input id="orderNum" type="text" th:field="*{vehicleOrder}" /> </p>
<button onclick="goToDetails()">Locate</button>
</form>
<br></br>
<div class="row">
<div class="col-lg-12">
<table id="list" class="display">
<thead>
<tr>
<th>Model Year</th>
<th>Order #</th>
<th>Model</th>
</tr>
</thead>
<tbody>
<c:forEach var="order" items="${order}" varStatus="loop">
<tr>
<td><c:out value="${order.modelYearNbr}" /></td>
<td><c:out value="${order.vehicleOrderNm}" /></td>
<td><c:out value="${order.model}" /></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
JS:
<script>
$(document).ready( function () {
$('#list').DataTable();
} );
function goToODetails() {
var modelYear = $('#modelYearId').val();
var vehicleOrder = $('#vehicleOrderId').val();
var url = './DataLoader/locate?modelYear=' + modelYear + '&vehicleOrder' + vehicleOrder;
$.get(url,function(result) {
var vehicle = result;
var list = $("#list");
list.append('<tr><td>' + result.modelYearNbr + '</td>' +
'<td>' + result.vehicleOrderNm + '</td>' +
'<td>' + result.model + '</td></tr>');
});
}
</script>
Before I added the data table files I was able to see the record post to the webpage, now it is not posting to the table.
Finally got it working, here is how:
$(document).ready(function() {
var table = $('#orderList').DataTable()
$('#goToOrder').on('click', function() {
var modelYear = $('#modelYearId').val();
var url = './DataLoader/locate?modelYear=' + modelYear;
$.get(url, function(result) {
$(result).each(function( i, object ){
var vehicle = result[i];
table.row.add([
vehicle.modelYear,
vehicle.vehicleOrder,
vehicle.model
]).draw(false)
.nodes()
.to$();
})
})
})
});
Below is a form when submitted displays the content in a table.
What works
Content is successfully transferred via form to table.
What is not working
I wanted to hide the table when the page loads and be displayed only after the form is submitted.
I tried #myTableData {visibility: hidden;} in css and then I tried plugging (.style.visibility="visible";) Javascript in my addtable function to display the table but it does not work. I am not sure if I am understanding this right.
Also how do I control the display of the table (like width, background color, font etc). I added (td.style.width = '200px'; but I don't see any changes).
CSS or JS for controlling table ?
function addTable() {
var table = document.createElement('TABLE').style.display = "block";
table.border='0';
for (var i=0; i<3; i++){
var tr = document.createElement('tr');
for (var j=0; j<4; j++){
var td = document.createElement('td');
td.style.width = '200px';
td.appendChild(document.createTextNode("Cell " + i + "," + j));
tr.appendChild(td);
}
}
}
function addRow() {
var myName = document.getElementById("name");
var domainName = document.getElementById("domain");
var url = document.getElementById("url");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(0).innerHTML= myName.value;
row.insertCell(1).innerHTML= domainName.value;
row.insertCell(2).innerHTML= url.value;
}
function load() {
console.log("Check if this loads");
}
/*
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
*/
#myTableData {visibility: hidden;}
body {
background: gray;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML dynamic table using JavaScript</title>
<script type="text/javascript" src="table-app.js"></script>
<link rel="stylesheet" href="table-app.css">
</head>
<body onload="load()">
<div id="myform">
<b>Simple form with name and age ...</b>
<table>
<tr>
<td>Name</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Domain</td>
<td><input type="text" id="domain">
</td>
</tr>
<tr>
<td>URL</td>
<td><input type="text" id="url"></td>
</tr>
<tr>
<td colspan=2><input type="button" id="add" value="Display as Table" onclick="Javascript:addRow()"></td>
</tr>
</table>
</div>
<table id="myTableData" border="1" cellpadding="2">
<tr>
<th>Name</td>
<th>Domain</th>
<th>URL</th>
</tr>
</table>
</div>
<!--
<div id="myDynamicTable">
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
to create a Table and add some data using JavaScript
</div> -->
</body>
</html>
1) In function addRow add table.style.visibility = "visible"; ,to display the table, right after var table = document.getElementById("myTableData");.
2) To set styles like width you can can use setAttribute method.
document.getElementById('myTableData').setAttribute("style","width:200px");
Note: I can't see where you make use of addTable function, maybe this is why some of styles are not setted when you want.
function addTable() {
var table = document.createElement('TABLE').style.display = "block";
table.border='0';
for (var i=0; i<3; i++){
var tr = document.createElement('tr');
for (var j=0; j<4; j++){
var td = document.createElement('td');
td.style.width = '200px';
td.appendChild(document.createTextNode("Cell " + i + "," + j));
tr.appendChild(td);
}
}
}
function addRow() {
var myName = document.getElementById("name");
var domainName = document.getElementById("domain");
var url = document.getElementById("url");
var table = document.getElementById("myTableData");
table.style.visibility = "visible";
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(0).innerHTML= myName.value;
row.insertCell(1).innerHTML= domainName.value;
row.insertCell(2).innerHTML= url.value;
}
function load() {
console.log("Check if this loads");
}
/*
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
*/
#myTableData {visibility: hidden;}
body {
background: gray;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML dynamic table using JavaScript</title>
<script type="text/javascript" src="table-app.js"></script>
<link rel="stylesheet" href="table-app.css">
</head>
<body onload="load()">
<div id="myform">
<b>Simple form with name and age ...</b>
<table>
<tr>
<td>Name</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Domain</td>
<td><input type="text" id="domain">
</td>
</tr>
<tr>
<td>URL</td>
<td><input type="text" id="url"></td>
</tr>
<tr>
<td colspan=2><input type="button" id="add" value="Display as Table" onclick="Javascript:addRow()"></td>
</tr>
</table>
</div>
<table id="myTableData" border="1" cellpadding="2">
<tr>
<th>Name</td>
<th>Domain</th>
<th>URL</th>
</tr>
</table>
</div>
<!--
<div id="myDynamicTable">
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
to create a Table and add some data using JavaScript
</div> -->
</body>
</html>
I don't have the rep to comment so I can't ask for details, but just in case you can use jquery, you can hide and show stuff like this:
$(function(){
$("#add").click(function() {
var name = $('#name').val();
var domain = $('#domain').val();
var url = $('#url').val();
$('#hidey').show();
$('#nametd').html(name);
$('#domtd').html(domain);
$('#urltd').html(url);
})
});
https://jsfiddle.net/6dxLsnL4/
Or trigger on form submit instead of click if you want, but there, you might want to consider ajax, because then you can make sure the form is processed on the server side before displaying the results.