Good afternoon.
I am trying to create a button to refresh the page, through the Google app Script Web, but the method "window.location.reload ();", does not work could someone help?
link Google app Script Web: https://script.google.com/d/1jyWe9jm0dIqHsY1uKJZ0pOJYzLuq9dip1cSsXhxBwv53cFakW2LHgM_n/edit?mid=ACjPJvGbLXQwvhjDh7fsdifcTFvgQby-gsIUWeCSmwUzTdnVvXw8LNckG8rXcsyhcYvAcWAN7pU4E05bQEJwZl_1189N-bwyvttAxpHxmbvzUvx_d9SDKh19x3VzY9XxClhXweVlmqdMOSs&uiv=2
<html>
<base target="_se">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://tablesorter.com/__jquery.tablesorter.min.js" type="text/javascript"></script>
<button onclick="sortTable()">Sort</button>
<button onclick="refresh()">refresh </button>
<table class="striped centered ajuste" id="tab">
<thead >
<tr>
<th>ID</th>
<th>NOME</th>
<th>DATA</th>
</tr>
</thead>
<tbody id="coportoTabela">
</tbody>
</table>
document.addEventListener("DOMContentLoaded", function(){
google.script.run.withSuccessHandler(gerarTabela).pegarTabelaEstoque();
});
function gerarTabela(dataArray){
var tcorpo = document.getElementById("coportoTabela");
dataArray.forEach(function(r){
var linha = document.createElement("tr");
var coluna1 = document.createElement("td");
coluna1.textContent = r[0];
var coluna2 = document.createElement("td");
coluna2.textContent = r[1];
var coluna3 = document.createElement("td");
coluna3.textContent = r[2];
linha.appendChild(coluna1);
linha.appendChild(coluna2);
linha.appendChild(coluna3);
tcorpo.appendChild(linha);
});
}
function refresh(){
window.location.reload();
}
Try this:
Javascript:
function reLoad() {
google.script.run
.withSuccessHandler(function(url){
window.open(url,'_top');
})
.getScriptURL();
}
GS:
function getScriptURL() {
return ScriptApp.getService().getUrl();
}
After location.reload() you should return false in onclick function:
function teste(){
location.reload();
return false;
}
Related
Good afternoon, I'm a beginner, I'm having trouble getting information from a table that consumes data from an api.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="main.js"></script>
<title>Document</title>
</head>
<body onload="apendeOnClick()">
<table id="tablerow">
<caption>Alien football stars</caption>
<thead>
<tr>
<th>DATA</th>
<th>TELEFONE</th>
<th>RAMAL</th>
<th>DESCRIÇÃO</th>
<th>ACÕES</th>
</tr>
</thead>
<tbody id="table_body">
</tbody>
</table>
<script>
</script>
</body>
</html>
My code is this, it feeds the table normally, but I would like when the person clicks on the row button to display the information in the alert.
main.js
fetch("https://my-json-server.typicode.com/lfnoleto/api-fake/contact").then((data) => {
return data.json()
}).then((Objectdata) => {
//console.log(Objectdata[0].data)
let tabelaData = ""
Objectdata.map((values)=>{
tabelaData += `<tr>
<td>${values.data}</td>
<td>${values.tefone}</td>
<td>${values.ramal}</td>
<td>${values.descricao}</td>
<td><button id="butao" class="btn btn-success" ><i class="fa fa-phone"></button></td>
</tr>`
})
document.getElementById("table_body").innerHTML = tabelaData
innerHTML = tabelaData
})
function apendeOnClick(){
const table = document.getElementById("tablerow")
console.log(table)
if (table) {
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].childNodes[5].childNodes[1].onclick = function() {
tableText(this);
};
}
}
}
function tableText(tableRow) {
let telefone = tableRow.childNodes[1].innerHTML;
let ramal = tableRow.childNodes[2].innerHTML;
let obj = {'telefone': telefone, 'ramal': ramal};
console.log(obj);
}
I hope that when the person clicks on the telephone icon, he displays the extension and telephone information
you can use data attribute to store extension info or other information.
<button id="butao" data-extension="123" class="btn btn-success" >
in javascript :
const button = document.querySelector('button');
button.dataset.extention // "123"
a good references:
https://www.w3schools.com/tags/att_data-.asp
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
I'm re-writing a project of mine to better align with the best practice documentation. I'm most of the way there, but it seems the jQuery I'm using to make the rows of my table sortable is not working. When I inspect the raw HTML of the table when it loads following the async call, I noticed that the sortable classes that the jQuery sortable widget is supposed to embed is not there (I can see it in my old code).
I have the relevant code duplicated on this sheet, but I'll include it here:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base target="_top">
<?!= include('1.1 openPackV2Stylesheet'); ?>
</head>
<body>
<div class="grid-container">
<table id="awayLineup">
<thead>
<tr>
<th></th>
<th>Rtg</th>
<th>Season</th>
<th>Name</th>
<th>Age</th>
<th>Team</th>
<th>OB</th>
<th>Out</th>
<th>Walk</th>
<th>Single</th>
<th>Single+</th>
<th>Double</th>
<th>Double+</th>
<th>Triple</th>
<th>Homer</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<?!= include('1.1 openPackV2Javascript'); ?>
</body>
</html>
1.1 openPackV2Javascript
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(function() {
var awayLineup = google.script.run.withSuccessHandler(displayAwayLineup)
.getLineupV2();
});
function displayAwayLineup(awayLineup){
// $('.loading').style.display("hidden");
var tbody = $('#awayLineup > tbody');
for (i in awayLineup){
tbody.append(
'<tr><td class="demographics">'+awayLineup[i][54]+'</td><td class="demographics">'+awayLineup[i][52]+'</td><td class="demographics">'+awayLineup[i][0]+'</td><td class="playerName">'+awayLineup[i][3]+'</td><td class="demographics">'+awayLineup[i][4]+'</td><td class="demographics">'+awayLineup[i][7]+'</td><td class="cardData"><span class="circle">'+awayLineup[i][32]+'</span></td><td class="cardData">'+awayLineup[i][33]+'</td><td class="cardData">'+awayLineup[i][34]+'</td><td class="cardData">'+awayLineup[i][35]+'</td><td class="cardData">'+awayLineup[i][36]+'</td><td class="cardData">'+awayLineup[i][37]+'</td><td class="cardData">'+awayLineup[i][38]+'</td><td class="cardData">'+awayLineup[i][39]+'</td><td class="cardData">'+awayLineup[i][40]+'</td></tr>')
}
}
// make tables sortable
$(window).on("load", function(){
$("table tbody").sortable({
helper:function(e,row){
var originalCells = row.children();
var cloneRow = row.clone();
cloneRow.children().each(function(index){
$(this).width(originalCells.eq(index).width());
})
return cloneRow;
}
});
});
</script>
When I saw your script, it seems that jQuery UI is not loaded. So, how about the following modification?
From:
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(function() {
var awayLineup = google.script.run.withSuccessHandler(displayAwayLineup)
.getLineupV2();
});
To:
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.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>
$(function() {
google.script.run.withSuccessHandler(displayAwayLineup).getLineupV2();
});
In your script, var awayLineup = of var awayLineup = google.script.run can be removed.
Reference:
jQuery UI
Hello I am new to website development (started a couple of days ago).
I have some programming experience using Python and C#.
I have been trying to generate an HTML table using JS and apply it a Bootstrap css style.
I can't seem to get it to work.
What I get:
What I want:
I hope to get something that styles like this (simplified from: w3schools)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
</table>
</div>
</body>
</html>
My html page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>CSVParser</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<script type="text/javascript" src="../scripts/csvToHtml.js"></script>
<form onsubmit="return processFile();" action="#" name="myForm" id="aForm" method="POST">
<input type="file" id="myFile" name="myFile"><br>
<input type="submit" name="submitMe" value="Process File">
</form>
<table id="myTable" class="table"></table>
</div>
</body>
</html>
and the JS script is:
function processFile() {
var fileSize = 0;
var theFile = document.getElementById("myFile").files[0];
if (theFile) {
var table = document.getElementById("myTable");
var headerLine = "";
var myReader = new FileReader();
myReader.onload = function(e) {
var content = myReader.result;
var lines = content.split("\r");
for (var count = 0; count < lines.length; count++) {
var row = document.createElement("tr");
var rowContent = lines[count].split(",");
for (var i = 0; i < rowContent.length; i++) {
if (count == 0) {
var cellElement = document.createElement("th");
} else {
var cellElement = document.createElement("td");
}
var cellContent = document.createTextNode(rowContent[i]);
cellElement.appendChild(cellContent);
row.appendChild(cellElement);
}
myTable.appendChild(row);
}
}
myReader.readAsText(theFile);
}
return false;
}
The csv data file I load looks like this:
TestA,TestB,TestC,TestD
Alpha,0.551608445,0.807554763,54.8608682
Beta,0.191220409,0.279946678,57.55254144
This is the generated HTML table from the JS:
<table id="myTable" class="table">
<tr>
<th>TestA</th>
<th>TestB</th>
<th>TestC</th>
<th>TestD</th>
</tr>
<tr>
<td>Alpha</td>
<td>0.551608445</td>
<td>0.807554763</td>
<td>54.8608682</td>
</tr>
<tr>
<td>Beta</td>
<td>0.191220409</td>
<td>0.279946678</td>
<td>57.55254144</td>
</tr>
<tr>
<td></td>
</tr>
</table>
You are missing a <tbody> element around all the <tr> Elements. thats it. if you insert this additionally you are fine with your layout.
I've changed your code quite a bit but here is a working example:
<!DOCTYPE html>
<html>
<head>
<title>CSVParser</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="#" name="myForm" id="aForm" method="POST">
<input type="file" id="myFile" name="myFile"><br>
<input type="button" name="submitMe" value="Process File" onclick="processFile();">
</form>
<table id="myTable" class="table"></table>
</div>
</body>
<script type="text/javascript">
function processFile() {
var fileSize = 0;
var theFile = document.getElementById("myFile").files[0];
if (theFile) {
var table = document.getElementById("myTable");
var headerLine = "";
var myReader = new FileReader();
myReader.onload = function(e) {
var content = myReader.result;
var lines = content.split("\r");
var tbody = document.createElement("tbody");
for (var count = 0; count < lines.length; count++) {
var row = document.createElement("tr");
var rowContent = lines[count].split(",");
for (var i = 0; i < rowContent.length; i++) {
if (count == 0) {
var cellElement = document.createElement("th");
} else {
var cellElement = document.createElement("td");
}
var cellContent = document.createTextNode(rowContent[i]);
cellElement.appendChild(cellContent);
row.appendChild(cellElement);
}
tbody.appendChild(row);
}
table.appendChild(tbody);
}
myReader.readAsText(theFile);
}
return false;
}
</script>
</html>
Working example without having to upload a file
<!DOCTYPE html>
<html>
<head>
<title>CSVParser</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="#" name="myForm" id="aForm" method="POST">
<textarea id="myFile" name="myFile">TestA,TestB,TestC,TestD
Alpha,0.551608445,0.807554763,54.8608682
Beta,0.191220409,0.279946678,57.55254144</textarea><br>
<input type="button" name="submitMe" value="Process File" onclick="processFile();">
</form>
<table id="myTable" class="table"></table>
</div>
</body>
<script type="text/javascript">
function processFile() {
var table = document.querySelector("#myTable");
var content = $("#myFile").val();
var lines = content.split("\n");
var tbody = document.createElement("tbody");
for (var count = 0; count < lines.length; count++) {
var row = document.createElement("tr");
var rowContent = lines[count].split(",");
for (var i = 0; i < rowContent.length; i++) {
if (count == 0) {
var cellElement = document.createElement("th");
} else {
var cellElement = document.createElement("td");
}
var cellContent = document.createTextNode(rowContent[i]);
cellElement.appendChild(cellContent);
row.appendChild(cellElement);
}
tbody.appendChild(row);
}
table.appendChild(tbody);
return false;
}
</script>
</html>
ALSO! You are using myTable.appendChild(row); in your code although you've never initialized any myTable variable.
Load your js script just before the </body> end tag.
Now you are loading the JavaScript before the browser has read all your tags and by then it can't find the elements you are querying in your script.
<body>
<div class="container">
<form onsubmit="return processFile();" action="#" name="myForm" id="aForm" method="POST">
<input type="file" id="myFile" name="myFile"><br>
<input type="submit" name="submitMe" value="Process File">
</form>
<table id="myTable" class="table"></table>
</div>
<!-- Here's the difference -->
<script type="text/javascript" src="../scripts/csvToHtml.js"></script>
</body>
MY js code :
function OrderFormControllerForRE($scope, $http) {
var urlString = window.location.href;
var urlParams = parseURLParams(urlString);
var jsonData = $.ajax({
url: "http://******:8989/getRuleEngine",
dataType: "json",
crossDomain: true,
}).responseText;
debugger;
if (!jsonData || jsonData === "") {
window.location.pathname = "../html/noDataFetched.html";
}
var parsed = JSON.parse(jsonData);
if (parsed.error) {
window.location.pathname = "../html/error.html";
}
$scope.ruleEngineJSON = parsed;
$scope.ruleName = "";
$scope.priority = "";
$scope.modifyPriority = function(ruleName) {
$scope.ruleName = ruleName;
$scope.priority = $scope.ruleEngineJSON[ruleName];
};
};
function navigateRuleEngine() {
window.location.pathname = "../html/modifyRuleEngine.html";
}
function parseURLParams(url) {
var queryStart = url.indexOf("?") + 1,
queryEnd = url.indexOf("#") + 1 || url.length + 1,
query = url.slice(queryStart, queryEnd - 1),
pairs = query.replace(/\+/g, " ").split("&"),
parms = {}, i, n, v, nv;
if (query === url || query === "") return;
for (i = 0; i < pairs.length; i++) {
nv = pairs[i].split("=", 2);
n = decodeURIComponent(nv[0]);
v = decodeURIComponent(nv[1]);
if (!parms.hasOwnProperty(n)) parms[n] = [];
parms[n].push(nv.length === 2 ? v : null);
}
return parms;
}
My Html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>POC-SalesForce</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js"></script>
<img src="../img/spinner.gif" id="img" style="display:none"/>
<link href="https://fonts.googleapis.com/css?family=Cookie|Open+Sans:400,700" rel="stylesheet"/>
<!-- The main CSS file -->
<link href="../css/style.css" rel="stylesheet"/>
<link href="../css/codeReview.css" rel="stylesheet"/>
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/preloader.css">
<script src="../js/scriptRuleEngine.js"></script>
</head>
<body ng-app ng-controller="OrderFormControllerForRE">
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Modify Rule Engine </span></h1>
</div>
</div>
</header>
<section class="col-md-12 col-lg-12 dateSection">
<!--<form method="get">-->
<table id="ruleEngine" class="table table-sm table-inverse table-responsive table-striped table-bordered"
cellpadding="20" width="100%">
<thead>
<tr>
<th>Rule Name</th>
<th>Priority</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr ng-repeat="(key,value) in ruleEngineJSON">
<td>{{key}}</td>
<td>{{value}}</td>
<td><button type="button" class="btn btn-default"
ng-click="modifyPriority(key)">Modify</button></td>
</tr>
</tfoot>
</table>
<!--</form>-->
</section>
<footer>
<p>Salesforce Free Code Review For Syngenta, Copyright © 2017</p>
<p>Developed By - Nagendra Kumar Singh</p>
</footer>
</body>
</html>
When I load the page the url fires the controller and return the correct JSON format as I can see the results directly in the browser by accessing http://********:8989/getRuleEngine
But when the page is loaded I get this error in the JS while debugging:
"ReferenceError: url is not defined
at eval (eval at OrderFormControllerForRE (http://usblrnagesingh1:8989/js/scriptRuleEngine.js:12:9), <anonymous>:1:1)
at c.OrderFormControllerForRE (http://usblrnagesingh1:8989/js/scriptRuleEngine.js:12:9)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js:35:36)
at Object.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js:35:165)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js:68:194
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js:54:298
at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js:7:392)
at K (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js:54:163)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js:47:397)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js:47:17"
enter image description here
I dont know why is it failing because I have a similar page which has <body ng-app ng-controller="OrderFormController"> and the script has function OrderFormController($scope, $http) {}. It works fine there without any error.
Update
I have even tried changing the angular js version, but that does not work. Also this version should work as I have similar page which is working.
I have made a function test tool for my company app using html/css/javascript/node.js/express/tablesorter.
My test tool is successfully performed the function tests.
My table style is from opensource 'Tablesorter'.
This is edit screen. The file is .ejs format. So, Node.js server render the file to html dynamically.
But, I wonder how to insert the row additionally in this table. So, I searched to solve the problem and got some solution like below.
for (var i in rList) {
var table = document.getElementById("ID_Table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var list = rList[i].split(" ");
cell1.innerHTML = list[0];
cell2.innerHTML = list[1];
}
But, this way is incomplete. The result is like this.
The 'tablesorter' style is not applied to additional rows. I don't know how to solve this.
<!DOCTYPE html>
<html>
<head>
<!-- Character Set -->
<meta charset="utf-8">
<!-- Title -->
<title><%= title %></title>
<!-- Style -->
<link rel='stylesheet' href='/stylesheets/style.css'/>
<!-- JS -->
<script src="/javascripts/indexCore.js"></script>
<!-- jQuery -->
<script src="/opensources/tablesorter/docs/js/jquery-latest.min.js"></script>
<script src="/opensources/tablesorter/docs/js/jquery-ui.min.js"></script>
<!-- Tablesorter: theme -->
<link class="theme default" rel="stylesheet" href="/opensources/tablesorter/css/theme.default.css">
<link class="theme blue" rel="stylesheet" href="/opensources/tablesorter/css/theme.blue.css">
<link class="theme green" rel="stylesheet" href="/opensources/tablesorter/css/theme.green.css">
<link class="theme grey" rel="stylesheet" href="/opensources/tablesorter/css/theme.grey.css">
<link class="theme ice" rel="stylesheet" href="/opensources/tablesorter/css/theme.ice.css">
<link class="theme black-ice" rel="stylesheet" href="/opensources/tablesorter/css/theme.black-ice.css">
<link class="theme dark" rel="stylesheet" href="/opensources/tablesorter/css/theme.dark.css">
<link class="theme dropbox" rel="stylesheet" href="/opensources/tablesorter/css/theme.dropbox.css">
<link class="theme metro-dark" rel="stylesheet" href="/opensources/tablesorter/css/theme.metro-dark.css">
<!-- Tablesorter script: required -->
<script src="/opensources/tablesorter/js/jquery.tablesorter.js"></script>
<script src="/opensources/tablesorter/js/widgets/widget-filter.js"></script>
<script src="/opensources/tablesorter/js/widgets/widget-stickyHeaders.js"></script>
<script id="js">
$(function(){
/* make second table scroll within its wrapper */
$('#ID_Table').tablesorter({
widthFixed : true,
headerTemplate : '{content} {icon}', // Add icon for various themes
widgets: [ 'zebra', 'stickyHeaders', 'filter' ],
widgetOptions: {
// jQuery selector or object to attach sticky header to
stickyHeaders_attachTo : '.wrapper' // or $('.wrapper')
}
});
$("#ID_Table tbody").click(function () {
//$(this).addClass('selected').siblings().removeClass('selected');
//alert('a');
});
});
</script>
<script>
$(function() { //이 부분은 렌더링 되자마자 실행되는 부분
window.includeCaption = true;
$('.caption').on('click', function(){
includeCaption = !includeCaption;
$(this).html( '' + includeCaption );
$('#ID_Table').each(function(){
if (this.config) {
this.config.widgetOptions.stickyHeaders_includeCaption = includeCaption;
this.config.widgetOptions.$sticky.children('caption').toggle(includeCaption);
}
});
});
// removed jQuery UI theme because of the accordion!
$('link.theme').each(function(){ this.disabled = true; });
var themes = 'dropbox blue green grey ice black-ice dark default metro-dark', //테마 순서
i, o = '', t = themes.split(' ');
for (i = 0; i < t.length; i++) {
o += '<option value="' + t[i] + '">' + t[i] + '</option>';
}
$('select:first')
.append(o)
.change(function(){
var theme = $(this).val().toLowerCase(),
// ui-theme is added by the themeswitcher
files = $('link.theme').each(function(){
this.disabled = true;
})
files.filter('.' + theme).each(function(){
this.disabled = false;
});
$('table')
.removeClass('tablesorter-' + t.join(' tablesorter-'))
.addClass('tablesorter-' + (theme === 'black-ice' ? 'blackice' : theme) );
}).change();
});
</script>
</head>
<body>
<div id="header">
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
Main
Edit
Blank
<hr/>
</div>
<div id="wrap">
<div id="Main_Screen">
<input type="button" value="로딩" id="btn" onclick="dynamicLoadScript_Main('/temps/MainScript.js', '/temps/WrapScript.js')"></input>
<input type="button" value="수행" id="btn1" onclick="Automation()"></input>
<button type="button">결과 리스트 출력</button>
</div>
<div id="List_Screen" class="narrow-block wrapper">
Theme: <select></select>
<table id="ID_Table" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th>Function</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
This is my .ejs File.
And, this is printResult Function in indexCore.js.
function printResult(){
var rList = resultList.split('\n');
for (var i in rList) {
var table = document.getElementById("ID_Table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var list = rList[i].split(" ");
cell1.innerHTML = list[0];
cell2.innerHTML = list[1];
}
}
You can edit and apply your logic at the .ejs file directly at your backend as your client side solution seems to be run after table being initialized by Tablesorter. You can also try to implement your client side solution adding the rows to table first then initialize Tablesorter. Good Luck!