I have a HTML table having Drop down links to several columns.
I have already achieved that if someone click on link then it will forward to that link.
What I want to achieve is, like I have different HTML table which I want to call on the same page when on-click event occurred for the particular selected drop down column.
This is my code
<div id="tbl"></div>
<ul id="contextMenu" class="dropdown-menu" role="menu">
<li><a href="test1.html" class="link1">report1</a></li>
<li><a href="" class="Link2">report2</a></li>
</ul>
$(window).load(function() {
$dropdown = $("#contextMenu");
$(".actionButton").click(function() {
//get row ID
//move dropdown menu
$(this).after($dropdown);
//update links
$(this).dropdown();
});
});
data= [
{
"amount": 291589,
"billdate": "2018-08-01",
"outlet": "JAYANAGAR"
},
{
"amount": 58337,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM"
},
{
"amount": 65970,
"billdate": "2018-08-01",
"outlet": "KOLAR"
},
{
"amount": 296125,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR"
},
{
"amount": 56545,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM"
},
{
"amount": 72213,
"billdate": "2018-08-02",
"outlet": "KOLAR"
},
{
"amount": 346605,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR"
},
{
"amount": 62459,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM"
},
{
"amount": 65248,
"billdate": "2018-08-03",
"outlet": "KOLAR"
},
{
"amount": 518212,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR"
},
{
"amount": 104801,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM"
},
{
"amount": 138151,
"billdate": "2018-08-04",
"outlet": "KOLAR"
},
{
"amount": 628358,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR"
},
{
"amount": 115223,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM"
},
{
"amount": 134107,
"billdate": "2018-08-05",
"outlet": "KOLAR"
},
{
"amount": 177866,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR"
},
{
"amount": 66095,
"billdate": "2018-08-06",
"outlet": "KOLAR"
},
{
"amount": 284069,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR"
},
{
"amount": 58789,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM"
},
{
"amount": 67886,
"billdate": "2018-08-07",
"outlet": "KOLAR"
},
{
"amount": 313128,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR"
},
{
"amount": 59939,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM"
},
{
"amount": 68558,
"billdate": "2018-08-08",
"outlet": "KOLAR"
}
]
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("tbl");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "Bill___Date";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let outletWiseTotal = {};
th = document.createElement("th");
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
data.forEach(el => {
if (el.outlet == element) {
outletWiseTotal[element] += parseInt(el.amount);
}
});
grandTotal += outletWiseTotal[element];
});
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = outletWiseTotal[element];
th.classList.add("text-right"); //ol totals
headerRow.appendChild(th);
});
/* th = document.createElement("th");
a = document.createElement("a");
// th.innerHTML = "Action drop"; // removed
th.classList.add("text-center");
th.classList.add("dropdown");
a.classList.add("btn-default");
a.classList.add("actionButton");
// added
a.setAttribute("data-toggle", "dropdown");
a.innerHTML = "Action drop";
th.appendChild(a); // added
headerRow.appendChild(th); */
th = document.createElement("th");
th.innerHTML = grandTotal;
th.classList.add("text-right"); // grand total
/* console.log(grandTotal);*/
// headerRow.appendChild(th);
headerRow.insertBefore(th , 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;
outlets.forEach(outlet => {
let el = 0;
data.forEach(d => {
if (d.billdate == element && d.outlet == outlet) {
total += parseInt(d.amount);
el = d.amount;
}
});
/* td = document.createElement("td");
td.innerHTML = el; */
td = document.createElement("td");
a = document.createElement("a");
// th.innerHTML = "Action drop"; // removed
td.classList.add("text-right");
td.classList.add("dropdown");
a.classList.add("btn-default");
a.classList.add("actionButton");
// added
a.setAttribute("data-toggle", "dropdown");
a.innerHTML = el;
td.appendChild(a); // added
row.appendChild(td);
/* td.classList.add("text-right"); //oldata
row.appendChild(td); */
});
/*console.log("row is : " , row.children )*/
td = document.createElement("td");
td.innerHTML = total;
td.classList.add("text-right"); //column total
// row.appendChild(td);
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);
Here, I have provided a link ('test.html') to check.
In my HTML table, I have three columns named as JAYANAGAR,MALLESHWARAM and KOLAR. For these three columns, I have drop-downs named as Report1 and Report2. When user clicks on Report1 drop down of column JAYANAGAR, it should show the Jayanagar data only. For all the three columns, I have links or new tables already in my code. I just want to filter the dynamic call when column dropdown is clicked and redirect or render that table assigned to that link.
- If user clicks dropdown of column jayanagar, then it should show jayanagar data in some div tag of same page
If user clicks dropdown of Maleeshwaram, then it should show malleshwaram data in same div tag .
I already have filtered data on the basis of outlets. Just want to do it at java script end.
- I just want to know which column's drop-down user is clicking.
