I am creating a dynamic HTML table which has col-span inside,the issue is i am not able to create that col-span headers dynamically,below is my json
json
[{
"billdate": "2018-09-01",
"outlet": "JAYANAGAR",
"gross": 451458,
"discount": 513,
"GST": 25357,
"amount": 476426
},
{
"billdate": "2018-09-01",
"outlet": "MALLESHWARAM",
"gross": 87190,
"discount": 0,
"GST": 4930,
"amount": 92141
},
{
"billdate": "2018-09-01",
"outlet": "KOLAR",
"gross": 109308,
"discount": 0,
"GST": 5966,
"amount": 115313
},
{
"billdate": "2018-09-02",
"outlet": "JAYANAGAR",
"gross": 483194,
"discount": 471,
"GST": 28319,
"amount": 511153
},
{
"billdate": "2018-09-02",
"outlet": "MALLESHWARAM",
"gross": 109483,
"discount": 0,
"GST": 6198,
"amount": 115704
},
{
"billdate": "2018-09-02",
"outlet": "KOLAR",
"gross": 79305,
"discount": 0,
"GST": 4254,
"amount": 83597
},
{
"billdate": "2018-09-03",
"outlet": "JAYANAGAR",
"gross": 157660,
"discount": 263,
"GST": 9944,
"amount": 167421
},
{
"billdate": "2018-09-03",
"outlet": "KOLAR",
"gross": 51059,
"discount": 0,
"GST": 2693,
"amount": 53775
}
]
billdate and outlet are parent header inside outlets i.e Jayanagar,malleshwaram and kolar here inside this i have other object values i.e gross,discount,GST and amount
- The four
gross,discount,GSTandamountthese are as col-span which i am creating staticallu likeinnerHTML=gross - I want to create them dynamically and not getting the idea how to achieve that
var data = [{
"billdate": "2018-09-01",
"outlet": "JAYANAGAR",
"gross": 451458,
"discount": 513,
"GST": 25357,
"amount": 476426
},
{
"billdate": "2018-09-01",
"outlet": "MALLESHWARAM",
"gross": 87190,
"discount": 0,
"GST": 4930,
"amount": 92141
},
{
"billdate": "2018-09-01",
"outlet": "KOLAR",
"gross": 109308,
"discount": 0,
"GST": 5966,
"amount": 115313
},
{
"billdate": "2018-09-02",
"outlet": "JAYANAGAR",
"gross": 483194,
"discount": 471,
"GST": 28319,
"amount": 511153
},
{
"billdate": "2018-09-02",
"outlet": "MALLESHWARAM",
"gross": 109483,
"discount": 0,
"GST": 6198,
"amount": 115704
},
{
"billdate": "2018-09-02",
"outlet": "KOLAR",
"gross": 79305,
"discount": 0,
"GST": 4254,
"amount": 83597
},
{
"billdate": "2018-09-03",
"outlet": "JAYANAGAR",
"gross": 157660,
"discount": 263,
"GST": 9944,
"amount": 167421
},
{
"billdate": "2018-09-03",
"outlet": "KOLAR",
"gross": 51059,
"discount": 0,
"GST": 2693,
"amount": 53775
}
]
let formatData = function(data) {
let billdates = [];
let outlets = [];
data.forEach(element => {
if (billdates.indexOf(element.billdate) == -1) {
billdates.push(element.billdate);
}
if (outlets.indexOf(element.outlet) == -1) {
outlets.push(element.outlet);
}
});
return {
data: data,
billdates: billdates,
outlets: outlets,
};
};
let renderTable = function(data) {
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("dailySales");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "BillDate";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let grandGross = 0;
let grandDiscount = 0;
let grandGst = 0;
let outletWiseTotal = {};
let outletWiseGross = {};
let outletWiseDiscount = {};
let outletWiseGst = {};
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
outletWiseGross[element] = 0;
outletWiseDiscount[element] = 0;
outletWiseGst[element] = 0;
data.forEach(el => {
if (el.outlet == element) {
outletWiseTotal[element] += parseInt(el.amount);
outletWiseGross[element] += parseInt(el.gross);
outletWiseDiscount[element] += parseInt(el.discount);
outletWiseGst[element] += parseInt(el.GST);
}
});
grandTotal += outletWiseTotal[element]; //calculating totals for Total column
grandGross += outletWiseGross[element];
grandDiscount += outletWiseDiscount[element];
grandGst += outletWiseGst[element];
});
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "";
headerRow.appendChild(th);
for (i = 0; i < outlets.length + 1; i++) {
th = document.createElement("th");
th.innerHTML = "Discount"; //here statically i am giving the header names
th.classList.add("text-center");
th.classList.add("discount");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "GST"; //here statically i am giving the header names
th.classList.add("text-center");
th.classList.add("gst");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Net_Amount"; //here statically i am giving the header names
th.classList.add("text-center");
th.classList.add("netAmount");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Gross_Amount"; //here statically i am giving the header names
th.classList.add("text-center");
th.classList.add("grossAmount");
headerRow.appendChild(th);
}
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
headerRow = document.createElement("tr");
td = document.createElement("th");
td.innerHTML = "Total";
td.classList.add("text-center");
headerRow.appendChild(td);
outlets.forEach(element => { // these are the table rows for each column
td = document.createElement("th");
td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
});
td = document.createElement("th");
td.innerHTML = grandTotal.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGst.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGross.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element => {
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
let totalGross = 0;
let totalDiscount = 0;
let totalGST = 0;
outlets.forEach(outlet => {
let ta = 0;
let tg = 0;
let tdi = 0;
let tgst = 0;
data.forEach(d => {
if (d.billdate == element && d.outlet == outlet) {
total += parseInt(d.amount);
totalGross += parseInt(d.gross);
totalDiscount += parseInt(d.discount);
totalGST += parseInt(d.GST);
ta = d.amount;
tg = d.gross;
tdi = d.discount;
tgst = d.GST;
}
});
td = document.createElement("td");
td.innerHTML = tg.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tdi.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tgst.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = ta.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
});
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGST.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGross.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
tbody.appendChild(row);
});
table.appendChild(tbody);
tbl.innerHTML = "";
tbl.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
let formatedData = formatData(data);
renderTable(formatedData);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div align="left" class="table table-responsive" id="commonDvScroll">
<table id="dailySales"></table>
</div>
- As per requirnment
gross,discount,GSTandamountall these are dynamic they can be 3 sometimes 2 and sometimes 1 so that i am trying to create dynamically - I have commented the lines in my code where i am creating these as headers
EDIT here in the below JSON i have only discount,gst and amount there is no gross so in my table i only want to these three headers as col-span in my table
As solution provided by @Anilm doesn't seems to be doing like this
[{
"billdate": "2018-09-01",
"outlet": "JAYANAGAR",
"discount": 513,
"GST": 25357,
"amount": 476426
},
{
"billdate": "2018-09-01",
"outlet": "MALLESHWARAM",
"discount": 0,
"GST": 4930,
"amount": 92141
},
{
"billdate": "2018-09-01",
"outlet": "KOLAR",
"discount": 0,
"GST": 5966,
"amount": 115313
},
{
"billdate": "2018-09-02",
"outlet": "JAYANAGAR",
"discount": 471,
"GST": 28319,
"amount": 511153
},
{
"billdate": "2018-09-02",
"outlet": "MALLESHWARAM",
"discount": 0,
"GST": 6198,
"amount": 115704
},
{
"billdate": "2018-09-02",
"outlet": "KOLAR",
"discount": 0,
"GST": 4254,
"amount": 83597
},
{
"billdate": "2018-09-03",
"outlet": "JAYANAGAR",
"discount": 263,
"GST": 9944,
"amount": 167421
},
{
"billdate": "2018-09-03",
"outlet": "KOLAR",
"discount": 0,
"GST": 2693,
"amount": 53775
}
]
When in my JSON all gross,Discount,Gst and Amount are there then 
When only Discount,GST and Amount are there then 
Similarly for others also
these four gross,discount,GSTand amount are dynamic user is selecting any one,two or all then i want to populate the table
- I am totally messed up what approach should I Try Please Anyone out here help me out with this problem
from How to create dynamic HTML header
No comments:
Post a Comment