How to make HTML table to Datatable? - javascript

I followed the below code to make a normal table into data table.. i included all the links responsible to make data table.. but still data table is not showing up.. pls resolve the error anyone?
<!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">
<title>ASSESSMENT 2</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap4.min.css">
<script>
$(document).ready(function () {
$('#example').DataTable();
});
</script>
</head>
<body>
<div id="" class="container">
<!-- <button type="button" onclick="run()"> Click Me </button> -->
<h1 class="text-center">Table of Data</h1>
<!--id="example" -->
<table id="example" class="table ">
<tr>
<th>NO</th>
<th>API</th>
<th>Description</th>
</tr>
</table>
</div>
<script>
const table = document.getElementById("example")
function run() {
var xhr = new XMLHttpRequest();
var url = 'https://api.publicapis.org/entries';
xhr.open("GET", url, true);
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
// getting res and to convert in json
let res = this.responseText;
let data = JSON.parse(res);
// console.log(data);
//traverse data
let NO =[]
let API = []
let Description = []
for (let i = 0; i < 100; i++) {
NO.push([i]);
API.push(data["entries"][i]["API"])
Description.push(data["entries"][i]["Description"])
}
// to create a table
for (let i = 0; i < 100; i++) {
let row = table.insertRow(i + 1);
//add cells
let cell0 = row.insertCell(0);
let cell1 = row.insertCell(1);
let cell2 = row.insertCell(2);
// to insert the data
cell0.innerHTML = NO [i]
cell1.innerHTML = API[i];
cell2.innerHTML = Description[i];
}
}
}
xhr.send();
}
run()
</script>
</body>
</html>
shall i need to put some specific links are the above things is enough? the output shows a normal table.. i have also called the table's id in script tag also.. is anything need to be done

Related

My array (myLeads) elements are not rendered in HTML list but they are showing correctly in console. I want to print myLeads[ ] elements in HTML list

let myLeads = [];
const inputEl = document.getElementById("input-el");
const inputBtn = document.getElementById("input-btn");
const ulEl = document.getElementById("ul-el");
inputBtn.addEventListener("click", function(){
myLeads.push(inputEl.value);
console.log(myLeads)
})
let arr = [2, 3, "fadf"]
/*arr[] elements are rendered correctly in HTML list. But myLeads[] elements are not rendered in HTML list, as they are printed correctly in console.*/
for(let i = 0; i < myLeads.length; i++){
ulEl.innerHTML += "<li>" + myLeads[i] + "</li>"
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>save leads</title>
<link rel="stylesheet" href="/index.css">
</head>
<body>
<input type="text" id="input-el">
<button id="input-btn">Save tabs</button>
<ul id="ul-el"></ul>
<script src="/index.js"></script>
</body>
</html>
Put the loop in a function and call it. Also make sure to reset the ul to be empty
let myLeads = [];
const inputEl = document.getElementById("input-el");
const inputBtn = document.getElementById("input-btn");
const ulEl = document.getElementById("ul-el");
inputBtn.addEventListener("click", function(){
myLeads.push(inputEl.value);
updateList();
})
let arr = [2, 3, "fadf"]
/*arr[] elements are rendered correctly in HTML list. But myLeads[] elements are not rendered in HTML list, as they are printed correctly in console.*/
function updateList(){
ulEl.innerHTML = "";
for(let i = 0; i < myLeads.length; i++){
ulEl.innerHTML += "<li>" + myLeads[i] + "</li>"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>save leads</title>
<link rel="stylesheet" href="/index.css">
</head>
<body>
<input type="text" id="input-el">
<button id="input-btn">Save tabs</button>
<ul id="ul-el"></ul>
<script src="/index.js"></script>
</body>
</html>
You are not updating the HTML element anywhere when the click event is being fired. That means your list is only populated by the initial elements of myLeads when the page is refreshed and then never again.
Move the cycle for generating li elements into a function, for example
function updateList(arr){
ulEl.innerHTML = "";
for(let i = 0; i < arr.length; i++){
ulEl.innerHTML += "<li>" + myLeads[i] + "</li>"
}
}
and then call it inside the event handler
inputBtn.addEventListener("click", function(){
myLeads.push(inputEl.value);
console.log(myLeads)
updateList(myLeads);
})

Script tags does not working in included html file

I have a problem with using js scripts inside HTML files.
There are 2 HTML files a and b. b is included inside a by using the script below.
function includeHTML() {
var z, i, elmnt, file, xhttp;
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
file = elmnt.getAttribute("w3-include-html");
if (file) {
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
}
}
}
I took it from w3school.com, using for include HTML, and my HTML file a and b is shown below:
a.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">
<title>Document</title>
</head>
<body>
<div w3-include-html="b.html"></div>
<script>
includeHTML();
</script>
</body>
</html>
And the b.html file:
<!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">
<title>Document</title>
</head>
<body>
<h4>The gist enbed link:</h3>
<script src="https://gist.github.com/meminb/8e2488a47bacc7e93e645022d3dc3af1.js"></script>
</body>
</html>
I am expecting to be able to see the gist that I have embedded with script tags in the a.html file but it does not work. Is there any point I am missing to achieve this, or any other solution to be able to run script tags in included files?
Try this
function includeHTML() {
var z, i, elmnt, file, xhttp;
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
file = elmnt.getAttribute("w3-include-html");
if (file) {
var iframe = document.createElement('iframe');
iframe.style.cssText = 'border:none;width:100%;height:100%;';
iframe.src = file;
elmnt.removeAttribute("w3-include-html");
elmnt.appendChild(iframe);
setTimeout((f, e) => {
var body = f.contentWindow.document.body;
var html = f.contentWindow.document.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
// console.log(e);
e.style.height = height + 'px';
// console.log(height);
}, 500, iframe, elmnt);
return;
}
}
}

How to change the loop to reverse the square print in Javascript

I'm learning java script and I'm currently working with testing in javiscritp, I've done this code that you can look at, but I don't know how to reverse now the order of these cubes to be 2 up and 1 down (see what I want in the picture) I know I need to change something for loops but I fail in any way to get what I want.
let Tabela = (function () {
const dajRed = function (tabela) {
let red = document.createElement("tr");
tabela.appendChild(red);
return red;
}
const dajCeliju = function (red, prikazi) {
let celija = document.createElement("td");
if (!prikazi) celija.style = "display:none;";
red.appendChild(celija)
return celija;
}
const crtaj = function (x, y) {
const body = document.getElementsByTagName("body")[0];
let tabelaEl = document.createElement("table");
body.appendChild(tabelaEl);
for (let i = 0; i < y; i++) {
let red = dajRed(tabelaEl);
for (let j = 0; j < x; j++) {
dajCeliju(red, j < i);
}
}
}
return {
crtaj: crtaj
}
}());
//table.crtaj(3,3)
//i=0 ⍉⍉⍉
//i=1 ⎕⍉⍉
//i=2 ⎕⎕⍉
//Tabela.crtaj(8, 8);
let assert = chai.assert;
describe('Tabela', function() {
describe('crtaj()', function() {
it('should draw 3 rows when parameter are 2,3', function() {
Tabela.crtaj(2,3);
let tabele = document.getElementsByTagName("table");
let tabela = tabele[tabele.length-1]
let redovi = tabela.getElementsByTagName("tr");
assert.equal(redovi.length, 3,"Broj redova treba biti 3");
});
it('should draw 2 columns in row 2 when parameter are 2,3', function() {
Tabela.crtaj(2,3);
let tabele = document.getElementsByTagName("table");
let tabela = tabele[tabele.length-1]
let redovi = tabela.getElementsByTagName("tr");
let kolone = redovi[2].getElementsByTagName("td");
let brojPrikazanih = 0;
for(let i=0;i<kolone.length;i++){
let stil = window.getComputedStyle(kolone[i])
if(stil.display!=='none') brojPrikazanih++;
}
assert.equal(brojPrikazanih, 2,"Broj kolona treba biti 2");
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mocha Tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
<style>
td{
border: 1px solid black;
height: 20px;
width: 20px;
}
</style>
</head>
<body>
<div id="ispis"></div>
<div id="mocha"></div>
<script src="https://unpkg.com/chai/chai.js"></script>
<script src="https://unpkg.com/mocha/mocha.js"></script>
<script class="mocha-init">
mocha.setup('bdd');
mocha.checkLeaks();
</script>
<script src="tabela.js"></script>
<script src="test.js"></script>
<script class="mocha-exec">
mocha.run();
</script>
</body>
</html>
Invert the check in dajCeliju:
if (prikazi) celija.style = "display:none;";
OR second option - change the params:
dajCeliju(red, j >= i);
Is this what you need?

Calculate total price in mutidimensional array

im trying to get the total price for a array of products but when i try it, it just return NaN
im kinda new to JavaScript so i might be doing it wrong
so i have a multidimensional array where i keed the data from the products then whit that data i create a table to display the data in the navigator but when i try to add all the price data to total it just say NaN in Navigator but i dont understand why because im using parseInt() method any idea why this could be happening? im running out of ideas to solve this.
JavaScript:
let carrito = [];
let continuar;
let figura;
let precio;
let cantidad;
let total;
do{
figura = prompt("Figura de acción:");
precio = prompt("Precio:");
cantidad = prompt("Cantidad:");
carrito.push([figura, cantidad, precio]);
continuar = prompt("¿Continuar?");
}while(continuar != "n");
console.log(carrito)
crearTabla()
function crearTabla(){
let tabla = "<thead><tr><th>Producto</th><th>Cantidad</th><th>Precio</th></tr></thead>"
for (var i = 0; i < carrito.length; i++) {
tabla += `<tr><td>${carrito[i][0]}</td><td>${carrito[i][1]}</td><td>${carrito[i][2]}</td></tr>`
total += parseInt(carrito[i][2]);
console.log(carrito[i][2]);
}
tabla += `<tr><td>---</td><td>Subtotal:</td><td>${total}</td></tr>`
document.getElementById("factura").innerHTML = tabla;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculadora</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="js/app.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</head>
<body>
<div>
<table id="factura"></table>
<button type="button" class="btn btn-success" onclick="calcular()">Calcular</button>
</div>
</body>
</html>
Initialize total as total = 0; - if you type undefined + 1 into the console of the browser dev tools it returns NaN. Without initializing total that is the result.
console.log(undefined + 1);
let total;
console.log('Total: ', total += 1);
let goodTotal = 0;
console.log('Good total: ', goodTotal += 1);

how to add data dynamically using for each loop

I am trying to add data dynamically in table from array object, and also I need to add serial number and icons (approve and reject) in action column. But right now am only able to add employee names for array object. How to add serial number and icons in column in this table. plz check image.
https://i.stack.imgur.com/sJDWK.png
Javascript -
const button = document.getElementById('btn2');
const employee = [
{
name:'shubham',
company:'google'
},
{
name:'yash',
company:'facebook'
},
{
name:'saurabh',
company:'hcl'
}
]
const mydiv = document.getElementById('mydiv');
employee.forEach(event =>{
const td = document.createElement('td');
const tr = document.createElement('tr');
tr.appendChild(td);
mydiv.appendChild(tr);
td.innerHTML = event.name
})
button.addEventListener('click', () =>{
const username = document.getElementById('username');
const userpass = document.getElementById('userpass');
if((username.value == "admin" && userpass.value == "admin") && (username.value != "" && userpass.value != "")){
console.log('yes')
window.location.pathname = 'dashboard.html';
}
})
HTML -
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h2>Welcome</h2>
<div >
<table class="table table-bordered" id="mydiv">
<tr>
<th>Sr.No.</th>
<th>Employee Name</th>
<th>Action</th>
</tr>
</table>
</div>
</div>
<script type="text/javascript" src="function.js"></script>
</body>
</html>
You can try something like this:
const employee = [
{
name:'shubham',
company:'google',
action: 'some action'
},
{
name:'yash',
company:'facebook',
action: 'some action'
},
{
name:'saurabh',
company:'hcl',
action: 'some action'
}
]
const mydiv = document.getElementById('mydiv');
employee.forEach((event, key) =>{
const serialTd = document.createElement('td');
const nameTd = document.createElement('td');
const actionTd = document.createElement('td');
const tr = document.createElement('tr');
tr.appendChild(serialTd);
tr.appendChild(nameTd);
tr.appendChild(actionTd);
mydiv.appendChild(tr);
nameTd.innerHTML = event.name
serialTD.innerHTML = key
actionTd.innerHTML = event.action
})

Categories