update html table with data from SQL database table in cshtml page - javascript

#{
var db = Database.Open("HEMS");
var LoadDevCmd = "SELECT * FROM " + App.UserMeterID;
var DevQuery = db.Query(LoadDevCmd);
foreach (var row in DevQuery)
{
var DevType = row.DeviceType;
var LoadType = row.Device_LoadType;
string Loc = row.Location;
var MAC = row.MACaddress;
var D_Status = row.DeviceStatus;
var myLoc = "";
if (Loc == null)
{
myLoc = "XLoc";
}
else
{
switch (Loc)
{
case "Living Room":
myLoc = "LivingRoom";
break;
case "Bedroom":
myLoc = "Bedroom";
break;
case "Bathroom":
myLoc = "Bathroom";
break;
case "Dining Room":
myLoc = "DiningRoom";
break;
case "Kitchen":
myLoc = "Kitchen";
break;
case "Balcony":
myLoc = "Balcony";
break;
case "Others":
myLoc = "Others";
break;
}
}
}
<body>
<table id="XLoc">
<tr>
<th align="left">Unknown Location</th>
</tr>
</table>
<table id="LivingRoom">
<tr>
<th align="left">Living Room</th>
</tr>
</table>
<table id="Bedroom">
<tr>
<th align="left">Bedroom</th>
</tr>
</table>
<table id="Bathroom">
<tr>
<th align="left">Bathroom</th>
</tr>
</table>
<table id="DiningRoom">
<tr>
<th align="left">Dining Room</th>
</tr>
</table>
<table id="Kitchen">
<tr>
<th align="left">Kitchen</th>
</tr>
</table>
<table id="Balcony">
<tr>
<th align="left">Balcony</th>
</tr>
</table>
<table id="Others">
<tr>
<th align="left">Others</th>
</tr>
</table>
</body>
<script>
function displayDev(id, MAC) {
var table = document.getElementById(id);
var row = table.insertRow(-1);
var cell = row.insertCell(-1);
cell.innerHTML = "MacAddress: " + MAC ;
}
</script>
I'm trying update my html tables in tag as shown above with the script function( displayDev(id, MAC)}. May I know how may I call the script function in the #{}?
I've tried the page.ClientScriptManager.RegisterStartupScript(); but I always get null page which cause the NullReferenceException error, may I know how should I fix it?

Try #Html.Raw("displayDev(" + myLoc + ")")

Related

Need To Import HTML values From Google Sheets to Google WebApp

I'm working on the Search crud via Google webapp, I want to display the HTML design on front end via fetching it from Google sheets cells. Showing some examples in the screen shot
Google Sheet cell contains with HTML codes
The front end doesn't display the HTML design from the Google sheets but displaying the data with HTML code.
Here is my Script Code
main.html
</head>
<body>
<div class="container">
<div id="app"></div>
<!-- Content here -->
</div>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
var data;
function loadView(options){
var id = typeof options.id === "undefined" ? "app" : options.id;
var cb = typeof options.callback === "undefined" ? function(){} : options.callback;
google.script.run.withSuccessHandler(function(html){
document.getElementById("app").innerHTML = html;
typeof options.params === "undefined" ? cb() : cb(options.params);
})[options.func]();
}
function setDataForSearch(){
google.script.run.withSuccessHandler(function(dataReturned){
data = dataReturned.slice();
}).getDataForSearch();
}
function search(){
var searchinput = document.getElementById("searchinput").value.toString().toLowerCase().trim();
var searchWords = searchinput.split(/\s+/);
var searchColumns = [0,1,2,3,4,5,6,7];
// and or
var resultsArray = data.filter(function(r){
return searchWords.every(function(word){
return searchColumns.some(function(colIndex){
return r[colIndex].toString().toLowerCase().indexOf(word) !== -1
});
});
});
var searchResultsBox = document.getElementById("searchResults");
var templateBox = document.getElementById("rowTemplate");
var template = templateBox.content;
searchResultsBox.innerHTML = "";
resultsArray.forEach(function(r){
var tr = template.cloneNode(true);
var l1Column = tr.querySelector(".L1");
var l2Column = tr.querySelector(".L2");
var l3Column = tr.querySelector(".L3");
var l4Column = tr.querySelector(".L4");
var l5Column = tr.querySelector(".L5");
var l6Column = tr.querySelector(".L6");
var l7Column = tr.querySelector(".L7");
var l8Column = tr.querySelector(".L8");
l1Column.textContent = r[0];
l2Column.textContent = r[1];
l3Column.textContent = r[2];
l4Column.textContent = r[3];
l5Column.textContent = r[4];
l6Column.textContent = r[5];
l7Column.textContent = r[6];
l8Column.textContent = r[7];
searchResultsBox.appendChild(tr);
});
}
function loadSearchView(){
loadView({func:"loadSearchView", callback: setDataForSearch});
}
window.addEventListener("load", loadSearchView);
function inputEventHandler(e){
if (e.target.matches("#searchinput")){
search();
}
}
document.getElementById("app").addEventListener("input",inputEventHandler);
</script>
</body>
</html>
search.html
<div class="form-group">
<input type="text" class="form-control" id="searchinput" placeholder="search...">
</div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Phone Number</th>
<th scope="col">Code</th>
<th scope="col">Country</th>
<th scope="col">City</th>
<th scope="col">Street</th>
</tr>
</thead>
<tbody id="searchResults">
</tbody>
</table>
<template id="rowTemplate">
<tr>
<td class="L1"></td>
<td class="L2"></td>
<td class="L3"></td>
<td class="L4"></td>
<td class="L5"></td>
<td class="L6"></td>
<td class="L7"></td>
<td class="L8"></td>
</tr>
</template>
serversidefunc.gs
function getDataForSearch(){
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("customer");
return ws.getRange(2, 1, ws.getLastRow(),8).getValues();
}
loadpartials.gs
function loadPartialHTML_(partial) {
const htmlServ = HtmlService.createTemplateFromFile(partial);
return htmlServ.evaluate().getContent();
}
function loadSearchView(){
return loadPartialHTML_("search");
}
I Hope my above post is clear.
How about the following modification for the function of search() in Javascript side?
From:
l1Column.textContent = r[0];
l2Column.textContent = r[1];
l3Column.textContent = r[2];
l4Column.textContent = r[3];
l5Column.textContent = r[4];
l6Column.textContent = r[5];
l7Column.textContent = r[6];
l8Column.textContent = r[7];
To:
l1Column.innerHTML = r[0];
l2Column.innerHTML = r[1];
l3Column.innerHTML = r[2];
l4Column.innerHTML = r[3];
l5Column.innerHTML = r[4];
l6Column.innerHTML = r[5];
l7Column.innerHTML = r[6];
l8Column.innerHTML = r[7];
Reference:
innerHTML

HTML Table Filtering/Selection

I have an HTML table that has some static data and some from MySQL. It is currently filtering properly, what I need help is adding the "yes" and "no" selections to the selection list. These are just test values, they are being read from MySQL. I am unable to figure out what values to insert here to add values from MySQL to the selection list. Any assistance will be appreciated! Thank you
.append($table.find('tbody tr')
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<title>Filter</title>
</head>
<script>
$.ajax({
url: 'http://localhost:7003/getTable',
type: "get",
dataType: "json",
success: function(data) {
drawTable(data);
}
});
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
}
</script>
</body>
</html>
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="dropdown-header">Age</th>
<th>Email</th>
<th class="dropdown-header">Gender</th>
<th class="dropdown-header">Term</th>
<th class="dropdown-header">Enrolled</th>
</tr>
</thead>
<tbody>
<script>
function drawRow(rowData) {
var row = $("<tr />")
$("#myTable").append(row);
row.append($('<td>' + rowData.County + '</td>'));
row.append($('<td>' + rowData.County + '</td>'));
row.append($('<td>').attr('data-field-name', 'age').text(rowData.County));
row.append($('<td>' + rowData.County + '</td>'));
row.append($('<td data-field-name="gender">' + rowData.County + '</td>'));
row.append($('<td data-field-name="term">' + rowData.County + '</td>'));
row.append($('<td data-field-name="enrolled">' + rowData.County + '</td>'));
}
</script>
<tr>
<td>John</td>
<td>Smith</td>
<td data-field-name="age">15</td>
<td>123</td>
<td data-field-name="gender">Male</td>
<td data-field-name="term">Summer2017</td>
<td data-field-name="enrolled">Fall2018</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td data-field-name="age">16</td>
<td>456</td>
<td data-field-name="gender">Female</td>
<td data-field-name="term">Fall2018</td>
<td data-field-name="enrolled">Fall2019</td>
</tr>
<tr>
<td>Bobby</td>
<td>Adams</td>
<td data-field-name="age">15</td>
<td>789</td>
<td data-field-name="gender">Male</td>
<td data-field-name="term">Spring2019</td>
<td data-field-name="enrolled">Fall2018</td>
</tr>
<tr>
<td>Sarah</td>
<td>Lee</td>
<td data-field-name="age">15</td>
<td>456</td>
<td data-field-name="gender">Female</td>
<td data-field-name="term">Fall2018</td>
<td data-field-name="enrolled">Fall2018</td>
</tr>
</tbody>
</table>
<script>
(function($) {
$.fn.tableFilterHeaders = function(filterFn) {
this.each((index, header) => {
let $header = $(header),
$table = $header.closest('table'),
text = $header.text(),
colIndex = $header.closest('th').index(),
fieldName = $header.attr('data-field-name') || text.toLowerCase(),
$select = $('<select>')
.data('fieldName', fieldName)
.append($('<option>').text(text).val('').prop('disabled', true))
.append($('<option>').text('All').val('all'))
.append($table.find('tbody tr')
.toArray()
.map(tr => {
return $(tr).find(`td:eq(${colIndex})`).text();
})
.filter(text => text.trim().length > 0)
.sort()
.filter((v, i, a) => a.indexOf(v) === i)
.map(text => {
return $('<option>').text(text).val(text);
}));
$header.empty().append($select.val('').on('change', filterFn));
});
};
$.fn.initRowClasses = function(oddCls, evenCls) {
this.find('tbody tr').each(function(i) {
$(this).toggleClass(oddCls, i % 2 == 0).toggleClass(evenCls, i % 2 == 1);
});
};
$.fn.updateRowClasses = function(oddCls, evenCls) {
this.find('tbody tr:visible:even').addClass(oddCls).removeClass(evenCls);
this.find('tbody tr:visible:odd').addClass(evenCls).removeClass(oddCls);
};
})(jQuery);
$('#myTable').initRowClasses('odd', 'even');
$('.dropdown-header').tableFilterHeaders(filterText);
function filterText(e) {
let $filter = $(e.target),
$table = $filter.closest('table'),
$filters = $table.find('.dropdown-header select'),
filterObj = $filters.toArray().reduce((obj, filter) => {
let $filter = $(filter);
return Object.assign(obj, { [$filter.data('fieldName')] : $filter.val() });
}, {});
if ($filter.val() === 'all') {
$filter.val('')
}
$table.find('tbody tr').each(function() {
$(this).toggle($(this).find('td').toArray().every(td => {
let $td = $(td), fieldName = $td.attr('data-field-name');
if (fieldName != null) {
return filterObj[fieldName] === null ||
filterObj[fieldName] === '' ||
filterObj[fieldName] === 'all' ||
filterObj[fieldName] === $td.text();
}
return true;
}));
});
$table.updateRowClasses('odd', 'even');
}
</script>
Not showing yes and no options.
Your filtering logic and odd/even row coloring logic is called BEFORE the data returns from your ajax even though it appears AFTER on the page/code. This is how async methods work.
You need to call the header and coloring logic inside the drawTable() function after, of course, you are done drawing the table... like this:
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
$('#myTable').initRowClasses('odd', 'even');
$('.dropdown-header').tableFilterHeaders(filterText);
}
Make sure to remove the foloowing 2 lines of code:
$('#myTable').initRowClasses('odd', 'even');
$('.dropdown-header').tableFilterHeaders(filterText);
from your code, wherever elsewhere they appear. Leaving them will not break anything, it will just run multiple times unnecessary.

sorting html table with jquery

I have a table in html, I have set for each td an id that I will need to sort the table with a Jquery code.
Sorting works with the FireFox browser, but with Chrome it does not work ... do you know how to help me?
$(function() {
$(".table-user-th").click(function() {
var o = $(this).hasClass('asc') ? 'desc' : 'asc';
$('.table-user-th').removeClass('asc').removeClass('desc');
$(this).addClass(o);
var colIndex = $(this).prevAll().length;
var tbod = $(this).closest("table").find("tbody");
var rows = tbod.find("tr");
rows.sort(function(a, b) {
var A = $(a).find("td").eq(colIndex).attr('id');;
var B = $(b).find("td").eq(colIndex).attr('id');;
if (!isNaN(A)) A = Number(A);
if (!isNaN(B)) B = Number(B);
return o == 'asc' ? A > B : B > A;
});
$.each(rows, function(index, ele) {
tbod.append(ele);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th class="table-user-th">Firstname</th>
<th class="table-user-th">Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td id="Mark">Mark</td>
<td id="Red">Red</td>
</tr>
<tr>
<td id="Nick">Nick</td>
<td id="Sid">Sid</td>
</tr>
<tr>
<td id="Alex">Alex</td>
<td id="Nirv">Nirv</td>
</tr>
</tbody>
</table>
It seems like there is no purpose of using ids here.
Actually the problem was in you sort function. It should return not just true/false but the numeric difference between two values. As usual it is return -1/0/1
So here I wrote comparator func that does just that. And depending on sort type I just multiply it on -1 or 1.
I've also refactored a little bit your code not to use classes or ids. Using jquery you can use data method that stores data on element by key/value.
$(function() {
function cmp(a,b) {return a < b ? 1 : a > b ? -1 : 0}
$(".sortable-table").on('click', 'th', function() {
var th = $(this);
var colIndex = th.data('column');
if(typeof colIndex === 'undefined') {
return;
}
var sortType = th.data('sort') === 'asc' ? 'desc' : 'asc';
th.data('sort', sortType);
var table = $(this).closest("table");
table.find('thead th').removeClass('asc desc');
th.addClass(sortType);
var tbody = table.find("tbody");
var rows = tbody.find("tr");
rows.sort(function(a, b) {
var A = $(a).find("td").eq(colIndex).text();
var B = $(b).find("td").eq(colIndex).text();
return cmp(A,B) * (sortType === 'asc' ? -1 : 1);
});
$.each(rows, function(index, ele) {
tbody.append(ele);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" class="sortable-table">
<thead>
<tr>
<th data-column="0">Firstname</th>
<th data-column="1">Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Red</td>
</tr>
<tr>
<td>Nick</td>
<td>Sid</td>
</tr>
<tr>
<td>Alex</td>
<td>Nirv</td>
</tr>
</tbody>
</table>
Update
Added
var table = $(this).closest("table");
table.find('thead th').removeClass('asc desc');
th.addClass(sortType);

DataTables footerCallback - conditional on another cell

I'm trying to implement a footerCallback in DataTables that computes a conditional sum of each column, based on a cell that's in a different column in the same row. Here's a demo of my setup: https://jsfiddle.net/rantoun/552y9j90/13/
HTML:
<table id="table1">
<thead>
<tr>
<th>Fruit</th>
<th>sumCondition</th>
<th># Eaten</th>
<th># Remaining</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th align="center">Count</th>
<th align="left"></th>
<th align="left"></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Apples</td>
<td>Use</td>
<td>3</td>
<td>8</td>
</tr>
<tr>
<td>Oranges</td>
<td>Use</td>
<td>6</td>
<td>5</td>
</tr>
<tr>
<td>Bananas</td>
<td>Ignore</td>
<td>2</td>
<td>9</td>
</tr>
</tbody>
</table>
jQuery:
$("#table1").DataTable({
"paging": false,
"searching": false,
"info": false,
"footerCallback": function ( row, data, start, end, display ) {
var columns = [2, 3];
var api = this.api();
_.each(columns, function(idx) {
var total = api
.column(idx)
.data()
.reduce(function (a, b) {
return parseInt(a) + parseInt(b);
}, 0)
$('tr:eq(0) th:eq('+idx+')', api.table().footer()).html(total);
})
}
});
Specifically, my goal is for the footerCallback to only sum the rows where "Ignore" is NOT in the Condition column. Hopefully this is clear and any help is appreciated.
I solved this by getting the current index of the summing value in the reduce function and then using the index to access the respective value in the condition cell. Below is the new jQuery code:
$('#table1').DataTable({
'paging': false,
'searching': false,
'info': false,
'footerCallback': function (row, data, start, end, display) {
var columns = [2, 3];
//console.log(data);
var api = this.api();
// Get sumCondition and put in array
_.each(columns, function (idx) {
var total = api
.column(idx)
.data()
.reduce(function (a, b) {
// Find index of current value for accessing sumCondition value in same row
var cur_index = api.column(idx).data().indexOf(b);
if (api.column(1).data()[cur_index] != 'Ignore') {
return parseInt(a) + parseInt(b);
} else {
return parseInt(a);
}
}, 0);
$('tr:eq(0) th:eq(' + idx + ')', api.table().footer()).html(total);
});
},
});
Working Fiddle: https://jsfiddle.net/rantoun/552y9j90/14/
There is a problem when rows in column have identical numbers. Where "if" statement is not applied. Base on this topic and answer: Jquery Datatable sum conditional footer callback not displaying correct result
HTML:
<table id="table1">
<thead>
<tr>
<th>Fruit</th>
<th>sumCondition</th>
<th># Eaten</th>
<th># Remaining</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th align="center">Count</th>
<th align="left"></th>
<th align="left"></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Apples</td>
<td>Use</td>
<td>3</td>
<td>8</td>
</tr>
<tr>
<td>Oranges</td>
<td>Use</td>
<td>6</td>
<td>5</td>
</tr>
<tr>
<td>Bananas</td>
<td>Ignore</td>
<td>6</td>
<td>9</td>
</tr>
</tbody>
</table>
jQuery:
$("#table1").DataTable({
"paging": false,
"searching": false,
"info": false,
"footerCallback": function ( row, data, start, end, display ) {
var columns = [2, 3];
//console.log(data);
var api = this.api();
// Get sumCondition and put in array
_.each(columns, function(idx) {
var total = total = api.data().reduce(function(a, b) {
var prev = 0;
var next = 0;
if (Array.isArray(a)) {
if (a[1] !== "Ignore") {
prev = parseInt(a[idx]);
}
} else {
prev = a;
}
if (b[1] !== "Ignore") {
next = parseInt(b[idx]);
}
return prev + next;
}, 0)
$('tr:eq(0) th:eq('+idx+')', api.table().footer()).html(total);
})
}
});
Working Fiddle: https://jsfiddle.net/79fx6aqg/1/

Change The Border For a Table in Javascript?

what I want to do is to change the border for a table (#mytable) by a J.S function depends on the value that the user enters (ex: user entered 3 => border="3")
I am using the following code which is existed in an external file called size.js
function chooseBorder (size){
switch (size) {
case "3":
document.getElementById("mytable").style.border = "3";
break;
case "5":
document.getElementById("mytable").style.border = "5";
break;
case "7":
document.getElementById("mytable").style.border = "7";
break;
case "9":
document.getElementById("mytable").style.border = "9";
break;
default:
//make border = 0
document.getElementById("mytable").style.border = "0";
break;
}
}
Then in the HTML I wrote:
<!DOCTYPE html>
<html>
<head>
<title> select a border size </title>
<script type = "text/javascript" src = "size.js" > </script>
<script>
number = window.prompt("Please select a size for table border\n 3(3 pixel border)\n 5(5 pixel border)\n 7(7 pixel border)\n 9(9 pixel border)");
</script>
</head>
<body onload="chooseBorder(number)">
<table id="mytable">
<thead>
<tr>
<th colspan = "4">Northern New Jersey Profit</th>
</tr>
<tr>
<th></th>
<th>April</th>
<th>May</th>
<th>June</th>
</tr>
</thead>
<tbody>
<tr>
<th>Montclair</th>
<td>100</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<th>Clifton</th>
<td>79</td>
<td>80</td>
<td>100</td>
</tr>
<tr>
<th>Newark</th>
<td>100</td>
<td>95</td>
<td>91</td>
</tr>
</tbody>
</table>
</body>
</html>
The Problem is nothing changes on loading the page, something wrong in my code. Thanks :)
Just a minor change but a big impact:
instead of
document.getElementById("mytable").style.border = "3";
use
document.getElementById("mytable").border= 3;
so your function becomes this:
function chooseBorder (size){
switch (size) {
case "3":
document.getElementById("mytable").border= "3";
break;
case "5":
document.getElementById("mytable").border = "5";
break;
case "7":
document.getElementById("mytable").border = "7";
break;
case "9":
document.getElementById("mytable").border = "9";
break;
default:
//make border = 0
document.getElementById("mytable").border = "0";
break;
}
}
and you're good to go

Categories