two buttons are overlapping each other
up vote
1
down vote
favorite
I have a form in my ui(HTML page) where i have some input fields and a search button(submit),on clicking search wht i am doing is hiding the form and showing some content in a div tag (content is HTML table).That HTML table has a export button which is there to export the table content into a excel sheet.
but on clicking the search button of form the export button loaded first and the table lodes after that
like this
here is my HTML form and after that form my div container which have table as well as export button
<form id="formId" method="get">
<div class="container">
<h4>Start Date:</h4>
<input type="text" id="startdate" name="fromdate" width="276"
placeholder="dd/mm/yyyy" required onchange="checkDate()" />
<h4>End Date:</h4>
<input type="text" id="enddate" name="todate" width="276"
placeholder="dd/mm/yyyy" required onchange="checkDate()"/>
<h4>Outlets:</h4>
<select id="all" name="outlet">
<option>ALL</option>
<c:forEach var="item" items="${obj.outlet}">
<option>${item}</option>
</c:forEach>
</select>
<div><br>
</div>
<div>
<br>
<button id="button" class="btn btn-default" type="submit">Search</button>
</div>
</div>
</form>
<div id="tableContainer" class="container-fluid">
<div id="tbl" ></div>
<button id="export">Export</button>
</div>
and here is my javascript by which i am making the ajax call
$(document).ready(function() {
$("#formId").submit(function(event) {
event.preventDefault();
$.ajax({
url : "URL",
method : "GET",
dataType : "json",
contentType: "application/json; charset=utf-8",
data : {
fromdate : $("#startdate").val(),
todate : $("#enddate").val(),
outlet : $("#all").val()
},
success : function(data) {
// console.log("test",tableValue);
$("#formId").hide();
var dataObj = formatData(data);
addTable(dataObj);
}
});
this my code to initially hide the table
$(document).ready(function() {
//at beginning
$('#tableContainer').hide();
$('#button').click(function (e) {
$('#tableContainer').show();
});
$("#export").click(function() {
$("#tbl").table2excel({
filename : "filenameSales.xls"
});
});
});
i just want that the export button should loaded after the table, here i am hiding form and after that showing all the data into new div tag.
how can i achieve that anyone have any idea please guide me.
this is the full code with json.by this code i am manupulating the j
data=[
{
"amount": 11750,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SARJAPURA ROAD"
},
{
"amount": 11030,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SINGASANDRA"
},
{
"amount": 11619,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SPICE GARDEN"
},
{
"amount": 45229,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "Chef Bakers Whitefield"
},
{
"amount": 38239,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "CHEF BAKERS YELAHANKA"
},
{
"amount": 7230,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ARAKERE"
},
{
"amount": 14836,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS AYYAPPA NGR"
},
{
"amount": 13984,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 1053,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS CHANDAPURA"
},
{
"amount": 16239,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Doddanekkundi"
},
{
"amount": 9575,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SIDDAPURA"
},
{
"amount": 17965,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ECITY"
},
{
"amount": 2644,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS VYDEHI"
},
{
"amount": 4250,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Hennur Main Road"
},
{
"amount": 17303,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS KADUBEESANAHALLI"
},
{
"amount": 15680,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS COFFEE BOARD"
},
{
"amount": 8035,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Kaggadasapura"
},
{
"amount": 4415,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Koramangala"
},
{
"amount": 8785,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Marathahalli 1"
},
{
"amount": 10425,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef bakers Marathahalli 2"
},
{
"amount": 12625,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Mahadevapura"
},
{
"amount": 12340,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS BEL LAYOUT"
},
{
"amount": 12040,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS MG ROAD"
},
{
"amount": 13859,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS NAGAWARA"
},
{
"amount": 9125,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRESTIGE SHANTHINIKETAN"
},
{
"amount": 24780,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS RR NAGAR"
},
{
"amount": 27865,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Kadugodi"
},
{
"amount": 11285,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SARJAPURA ROAD"
},
{
"amount": 3305,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SINGASANDRA"
},
{
"amount": 12625,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SPICE GARDEN"
},
{
"amount": 33766,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Whitefield"
},
{
"amount": 34300,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS YELAHANKA"
},
{
"amount": 6751,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ARAKERE"
},
{
"amount": 12626,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS AYYAPPA NGR"
},
{
"amount": 33020,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 450,
"billdate": "2018-05-07",
"counter": "Take Away",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 2215,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS CHANDAPURA"
},
{
"amount": 6518,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Doddanekkundi"
},
{
"amount": 11305,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SIDDAPURA"
},
{
"amount": 11990,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ECITY"
},
{
"amount": 11350,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS VYDEHI"
},
{
"amount": 5440,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Hennur Main Road"
},
{
"amount": 20707,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS KADUBEESANAHALLI"
},
{
"amount": 14155,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS COFFEE BOARD"
},
{
"amount": 5285,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Kaggadasapura"
},
{
"amount": 5404,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Koramangala"
},
{
"amount": 5200,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Marathahalli 1"
},
{
"amount": 13000,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef bakers Marathahalli 2"
},
{
"amount": 20049,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Mahadevapura"
},
{
"amount": 10592,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS BEL LAYOUT"
},
{
"amount": 9934,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS MG ROAD"
},
{
"amount": 9803,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS NAGAWARA"
},
{
"amount": 13877,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRESTIGE SHANTHINIKETAN"
},
{
"amount": 42368,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRITECH"
},
{
"amount": 13173,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS RR NAGAR"
},
{
"amount": 26263,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Kadugodi"
},
{
"amount": 7250,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SARJAPURA ROAD"
},
{
"amount": 3100,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SINGASANDRA"
},
{
"amount": 9870,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SPICE GARDEN"
},
{
"amount": 23093,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Whitefield"
},
{
"amount": 20805,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS YELAHANKA"
},
{
"amount": 4140,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ARAKERE"
},
{
"amount": 11137,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS AYYAPPA NGR"
},
{
"amount": 33034,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 700,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS CHANDAPURA"
},
{
"amount": 12351,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Doddanekkundi"
},
{
"amount": 12190,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SIDDAPURA"
},
{
"amount": 13269,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ECITY"
},
{
"amount": 10023,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS VYDEHI"
},
{
"amount": 5180,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Hennur Main Road"
},
{
"amount": 22279,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS KADUBEESANAHALLI"
},
{
"amount": 17543,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS COFFEE BOARD"
},
{
"amount": 11850,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Kaggadasapura"
},
{
"amount": 7634,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Koramangala"
},
{
"amount": 8175,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Marathahalli 1"
},
{
"amount": 13159,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef bakers Marathahalli 2"
},
{
"amount": 21519,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Mahadevapura"
},
{
"amount": 7610,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS BEL LAYOUT"
},
{
"amount": 7634,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS MG ROAD"
},
{
"amount": 23463,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS MANYATA TECH PARK"
},
{
"amount": 14705,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS NAGAWARA"
},
{
"amount": 9020,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRESTIGE SHANTHINIKETAN"
},
{
"amount": 40225,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRITECH"
},
{
"amount": 11430,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS RR NAGAR"
},
{
"amount": 21596,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Kadugodi"
},
{
"amount": 7000,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SARJAPURA ROAD"
},
{
"amount": 3050,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SINGASANDRA"
},
{
"amount": 6705,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SPICE GARDEN"
},
{
"amount": 29221,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Whitefield"
},
{
"amount": 24020,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS YELAHANKA"
},
{
"amount": 5410,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ARAKERE"
},
{
"amount": 13660,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 1073,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS CHANDAPURA"
},
{
"amount": 8995,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Doddanekkundi"
},
{
"amount": 13405,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SIDDAPURA"
},
{
"amount": 14910,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ECITY"
},
{
"amount": 9730,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS VYDEHI"
},
{
"amount": 4001,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Hennur Main Road"
},
{
"amount": 16252,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS KADUBEESANAHALLI"
},
{
"amount": 6490,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Kaggadasapura"
},
{
"amount": 6913,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Koramangala"
},
{
"amount": 13493,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Marathahalli 1"
},
]
function formatData(data) {
let toReturn = ;
let dateWiseObj = {};
let maxUniqueForOutlets = {};
data.forEach(function (d) {
if (!maxUniqueForOutlets[d["outlet"]]) {
maxUniqueForOutlets[d["outlet"]] = ;
}
if (maxUniqueForOutlets[d["outlet"]].indexOf(d["counter"]) == -1) {
maxUniqueForOutlets[d["outlet"]].push(d["counter"]);
}
if (!dateWiseObj[d["billdate"]]) {
dateWiseObj[d["billdate"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
} else {
if (!dateWiseObj[d["billdate"]][d["outlet"]]) {
dateWiseObj[d["billdate"]][d["outlet"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
} else {
if (!dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]]) {
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
}
}
}
});
return {
dateWiseObj: dateWiseObj,
maxUniqueForOutlets: maxUniqueForOutlets
};
};
function addTable(dataObj) {
let dateWiseObj = dataObj.dateWiseObj;
let maxUniqueForOutlets = dataObj.maxUniqueForOutlets;
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "Outlet";
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
Object.keys(maxUniqueForOutlets).forEach(function (d) {
th = document.createElement("th");
th.innerHTML = d;
th.colSpan = maxUniqueForOutlets[d].length + 1;
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "Bill_____Date";
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Counter";
headerRow.appendChild(th);
Object.keys(maxUniqueForOutlets).forEach(function (k) {
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
maxUniqueForOutlets[k].forEach(function (d) {
th = document.createElement("th");
th.innerHTML = d;
headerRow.appendChild(th);
});
});
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
headerRow = document.createElement("tr");
let completeTotal = 0;
let outletandCounterWiseCompleteTotal = {};
Object.keys(dateWiseObj).forEach(function (k) {
let row = document.createElement("tr");
let td = document.createElement("td");
td.innerHTML = k;
row.appendChild(td);
grandTotal = 0;
outletWiseTotal = {};
Object.keys(maxUniqueForOutlets).map(function (d) {
if (!outletandCounterWiseCompleteTotal[d])
outletandCounterWiseCompleteTotal[d] = {};
outletWiseTotal[d] = 0;
if (dateWiseObj[k][d]) {
Object.keys(dateWiseObj[k][d]).forEach(function (i) {
if (outletandCounterWiseCompleteTotal[d][i]) {
outletandCounterWiseCompleteTotal[d][i] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
} else {
outletandCounterWiseCompleteTotal[d][i] = parseInt(dateWiseObj[k][d][i]["amount"] || "0");
}
outletWiseTotal[d] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
});
}
if (outletandCounterWiseCompleteTotal[d]["total"])
outletandCounterWiseCompleteTotal[d]["total"] += outletWiseTotal[d];
else
outletandCounterWiseCompleteTotal[d]["total"] = outletWiseTotal[d];
grandTotal += outletWiseTotal[d];
});
td = document.createElement("td");
td.innerHTML = grandTotal;
row.appendChild(td);
Object.keys(maxUniqueForOutlets).map(function (d) {
td = document.createElement("td");
td.innerHTML = outletWiseTotal[d];
row.appendChild(td);
if (dateWiseObj[k][d]) {
maxUniqueForOutlets[d].forEach(function (i) {
td = document.createElement("td");
td.innerHTML = dateWiseObj[k][d][i] ? dateWiseObj[k][d][i]["amount"] : "0";
row.appendChild(td);
});
} else {
maxUniqueForOutlets[d].forEach(function (i) {
td = document.createElement("td");
td.innerHTML = "0";
row.appendChild(td);
});
}
});
tbody.appendChild(row);
completeTotal += grandTotal;
//console.log(outletWiseTotal);
});
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = completeTotal;
headerRow.appendChild(th);
Object.keys(maxUniqueForOutlets).forEach(function (d) {
if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d]["total"]) {
th = document.createElement("th");
th.innerHTML = outletandCounterWiseCompleteTotal[d]["total"];
headerRow.appendChild(th);
} else {
th = document.createElement("th");
th.innerHTML = 0;
headerRow.appendChild(th);
}
maxUniqueForOutlets[d].forEach(function (i) {
if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d][i]) {
th = document.createElement("th");
th.innerHTML = outletandCounterWiseCompleteTotal[d][i];
headerRow.appendChild(th);
} else {
th = document.createElement("th");
th.innerHTML = 0;
headerRow.appendChild(th);
}
});
});
thead.appendChild(headerRow);
table.appendChild(tbody);
let divContainer = document.getElementById("tbl");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
var dataObj = formatData(data);
addTable(dataObj);
javascript jquery html
asked Nov 9 at 9:36
dheeraj kumar
868
add a comment |
up vote
1
down vote
favorite
I have a form in my ui(HTML page) where i have some input fields and a search button(submit),on clicking search wht i am doing is hiding the form and showing some content in a div tag (content is HTML table).That HTML table has a export button which is there to export the table content into a excel sheet.
but on clicking the search button of form the export button loaded first and the table lodes after that
like this
here is my HTML form and after that form my div container which have table as well as export button
<form id="formId" method="get">
<div class="container">
<h4>Start Date:</h4>
<input type="text" id="startdate" name="fromdate" width="276"
placeholder="dd/mm/yyyy" required onchange="checkDate()" />
<h4>End Date:</h4>
<input type="text" id="enddate" name="todate" width="276"
placeholder="dd/mm/yyyy" required onchange="checkDate()"/>
<h4>Outlets:</h4>
<select id="all" name="outlet">
<option>ALL</option>
<c:forEach var="item" items="${obj.outlet}">
<option>${item}</option>
</c:forEach>
</select>
<div><br>
</div>
<div>
<br>
<button id="button" class="btn btn-default" type="submit">Search</button>
</div>
</div>
</form>
<div id="tableContainer" class="container-fluid">
<div id="tbl" ></div>
<button id="export">Export</button>
</div>
and here is my javascript by which i am making the ajax call
$(document).ready(function() {
$("#formId").submit(function(event) {
event.preventDefault();
$.ajax({
url : "URL",
method : "GET",
dataType : "json",
contentType: "application/json; charset=utf-8",
data : {
fromdate : $("#startdate").val(),
todate : $("#enddate").val(),
outlet : $("#all").val()
},
success : function(data) {
// console.log("test",tableValue);
$("#formId").hide();
var dataObj = formatData(data);
addTable(dataObj);
}
});
this my code to initially hide the table
$(document).ready(function() {
//at beginning
$('#tableContainer').hide();
$('#button').click(function (e) {
$('#tableContainer').show();
});
$("#export").click(function() {
$("#tbl").table2excel({
filename : "filenameSales.xls"
});
});
});
i just want that the export button should loaded after the table, here i am hiding form and after that showing all the data into new div tag.
how can i achieve that anyone have any idea please guide me.
this is the full code with json.by this code i am manupulating the j
data=[
{
"amount": 11750,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SARJAPURA ROAD"
},
{
"amount": 11030,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SINGASANDRA"
},
{
"amount": 11619,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SPICE GARDEN"
},
{
"amount": 45229,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "Chef Bakers Whitefield"
},
{
"amount": 38239,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "CHEF BAKERS YELAHANKA"
},
{
"amount": 7230,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ARAKERE"
},
{
"amount": 14836,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS AYYAPPA NGR"
},
{
"amount": 13984,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 1053,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS CHANDAPURA"
},
{
"amount": 16239,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Doddanekkundi"
},
{
"amount": 9575,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SIDDAPURA"
},
{
"amount": 17965,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ECITY"
},
{
"amount": 2644,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS VYDEHI"
},
{
"amount": 4250,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Hennur Main Road"
},
{
"amount": 17303,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS KADUBEESANAHALLI"
},
{
"amount": 15680,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS COFFEE BOARD"
},
{
"amount": 8035,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Kaggadasapura"
},
{
"amount": 4415,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Koramangala"
},
{
"amount": 8785,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Marathahalli 1"
},
{
"amount": 10425,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef bakers Marathahalli 2"
},
{
"amount": 12625,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Mahadevapura"
},
{
"amount": 12340,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS BEL LAYOUT"
},
{
"amount": 12040,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS MG ROAD"
},
{
"amount": 13859,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS NAGAWARA"
},
{
"amount": 9125,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRESTIGE SHANTHINIKETAN"
},
{
"amount": 24780,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS RR NAGAR"
},
{
"amount": 27865,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Kadugodi"
},
{
"amount": 11285,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SARJAPURA ROAD"
},
{
"amount": 3305,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SINGASANDRA"
},
{
"amount": 12625,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SPICE GARDEN"
},
{
"amount": 33766,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Whitefield"
},
{
"amount": 34300,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS YELAHANKA"
},
{
"amount": 6751,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ARAKERE"
},
{
"amount": 12626,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS AYYAPPA NGR"
},
{
"amount": 33020,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 450,
"billdate": "2018-05-07",
"counter": "Take Away",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 2215,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS CHANDAPURA"
},
{
"amount": 6518,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Doddanekkundi"
},
{
"amount": 11305,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SIDDAPURA"
},
{
"amount": 11990,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ECITY"
},
{
"amount": 11350,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS VYDEHI"
},
{
"amount": 5440,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Hennur Main Road"
},
{
"amount": 20707,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS KADUBEESANAHALLI"
},
{
"amount": 14155,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS COFFEE BOARD"
},
{
"amount": 5285,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Kaggadasapura"
},
{
"amount": 5404,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Koramangala"
},
{
"amount": 5200,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Marathahalli 1"
},
{
"amount": 13000,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef bakers Marathahalli 2"
},
{
"amount": 20049,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Mahadevapura"
},
{
"amount": 10592,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS BEL LAYOUT"
},
{
"amount": 9934,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS MG ROAD"
},
{
"amount": 9803,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS NAGAWARA"
},
{
"amount": 13877,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRESTIGE SHANTHINIKETAN"
},
{
"amount": 42368,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRITECH"
},
{
"amount": 13173,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS RR NAGAR"
},
{
"amount": 26263,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Kadugodi"
},
{
"amount": 7250,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SARJAPURA ROAD"
},
{
"amount": 3100,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SINGASANDRA"
},
{
"amount": 9870,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SPICE GARDEN"
},
{
"amount": 23093,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Whitefield"
},
{
"amount": 20805,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS YELAHANKA"
},
{
"amount": 4140,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ARAKERE"
},
{
"amount": 11137,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS AYYAPPA NGR"
},
{
"amount": 33034,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 700,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS CHANDAPURA"
},
{
"amount": 12351,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Doddanekkundi"
},
{
"amount": 12190,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SIDDAPURA"
},
{
"amount": 13269,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ECITY"
},
{
"amount": 10023,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS VYDEHI"
},
{
"amount": 5180,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Hennur Main Road"
},
{
"amount": 22279,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS KADUBEESANAHALLI"
},
{
"amount": 17543,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS COFFEE BOARD"
},
{
"amount": 11850,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Kaggadasapura"
},
{
"amount": 7634,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Koramangala"
},
{
"amount": 8175,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Marathahalli 1"
},
{
"amount": 13159,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef bakers Marathahalli 2"
},
{
"amount": 21519,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Mahadevapura"
},
{
"amount": 7610,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS BEL LAYOUT"
},
{
"amount": 7634,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS MG ROAD"
},
{
"amount": 23463,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS MANYATA TECH PARK"
},
{
"amount": 14705,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS NAGAWARA"
},
{
"amount": 9020,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRESTIGE SHANTHINIKETAN"
},
{
"amount": 40225,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRITECH"
},
{
"amount": 11430,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS RR NAGAR"
},
{
"amount": 21596,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Kadugodi"
},
{
"amount": 7000,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SARJAPURA ROAD"
},
{
"amount": 3050,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SINGASANDRA"
},
{
"amount": 6705,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SPICE GARDEN"
},
{
"amount": 29221,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Whitefield"
},
{
"amount": 24020,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS YELAHANKA"
},
{
"amount": 5410,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ARAKERE"
},
{
"amount": 13660,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 1073,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS CHANDAPURA"
},
{
"amount": 8995,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Doddanekkundi"
},
{
"amount": 13405,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SIDDAPURA"
},
{
"amount": 14910,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ECITY"
},
{
"amount": 9730,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS VYDEHI"
},
{
"amount": 4001,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Hennur Main Road"
},
{
"amount": 16252,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS KADUBEESANAHALLI"
},
{
"amount": 6490,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Kaggadasapura"
},
{
"amount": 6913,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Koramangala"
},
{
"amount": 13493,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Marathahalli 1"
},
]
function formatData(data) {
let toReturn = ;
let dateWiseObj = {};
let maxUniqueForOutlets = {};
data.forEach(function (d) {
if (!maxUniqueForOutlets[d["outlet"]]) {
maxUniqueForOutlets[d["outlet"]] = ;
}
if (maxUniqueForOutlets[d["outlet"]].indexOf(d["counter"]) == -1) {
maxUniqueForOutlets[d["outlet"]].push(d["counter"]);
}
if (!dateWiseObj[d["billdate"]]) {
dateWiseObj[d["billdate"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
} else {
if (!dateWiseObj[d["billdate"]][d["outlet"]]) {
dateWiseObj[d["billdate"]][d["outlet"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
} else {
if (!dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]]) {
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
}
}
}
});
return {
dateWiseObj: dateWiseObj,
maxUniqueForOutlets: maxUniqueForOutlets
};
};
function addTable(dataObj) {
let dateWiseObj = dataObj.dateWiseObj;
let maxUniqueForOutlets = dataObj.maxUniqueForOutlets;
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "Outlet";
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
Object.keys(maxUniqueForOutlets).forEach(function (d) {
th = document.createElement("th");
th.innerHTML = d;
th.colSpan = maxUniqueForOutlets[d].length + 1;
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "Bill_____Date";
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Counter";
headerRow.appendChild(th);
Object.keys(maxUniqueForOutlets).forEach(function (k) {
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
maxUniqueForOutlets[k].forEach(function (d) {
th = document.createElement("th");
th.innerHTML = d;
headerRow.appendChild(th);
});
});
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
headerRow = document.createElement("tr");
let completeTotal = 0;
let outletandCounterWiseCompleteTotal = {};
Object.keys(dateWiseObj).forEach(function (k) {
let row = document.createElement("tr");
let td = document.createElement("td");
td.innerHTML = k;
row.appendChild(td);
grandTotal = 0;
outletWiseTotal = {};
Object.keys(maxUniqueForOutlets).map(function (d) {
if (!outletandCounterWiseCompleteTotal[d])
outletandCounterWiseCompleteTotal[d] = {};
outletWiseTotal[d] = 0;
if (dateWiseObj[k][d]) {
Object.keys(dateWiseObj[k][d]).forEach(function (i) {
if (outletandCounterWiseCompleteTotal[d][i]) {
outletandCounterWiseCompleteTotal[d][i] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
} else {
outletandCounterWiseCompleteTotal[d][i] = parseInt(dateWiseObj[k][d][i]["amount"] || "0");
}
outletWiseTotal[d] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
});
}
if (outletandCounterWiseCompleteTotal[d]["total"])
outletandCounterWiseCompleteTotal[d]["total"] += outletWiseTotal[d];
else
outletandCounterWiseCompleteTotal[d]["total"] = outletWiseTotal[d];
grandTotal += outletWiseTotal[d];
});
td = document.createElement("td");
td.innerHTML = grandTotal;
row.appendChild(td);
Object.keys(maxUniqueForOutlets).map(function (d) {
td = document.createElement("td");
td.innerHTML = outletWiseTotal[d];
row.appendChild(td);
if (dateWiseObj[k][d]) {
maxUniqueForOutlets[d].forEach(function (i) {
td = document.createElement("td");
td.innerHTML = dateWiseObj[k][d][i] ? dateWiseObj[k][d][i]["amount"] : "0";
row.appendChild(td);
});
} else {
maxUniqueForOutlets[d].forEach(function (i) {
td = document.createElement("td");
td.innerHTML = "0";
row.appendChild(td);
});
}
});
tbody.appendChild(row);
completeTotal += grandTotal;
//console.log(outletWiseTotal);
});
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = completeTotal;
headerRow.appendChild(th);
Object.keys(maxUniqueForOutlets).forEach(function (d) {
if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d]["total"]) {
th = document.createElement("th");
th.innerHTML = outletandCounterWiseCompleteTotal[d]["total"];
headerRow.appendChild(th);
} else {
th = document.createElement("th");
th.innerHTML = 0;
headerRow.appendChild(th);
}
maxUniqueForOutlets[d].forEach(function (i) {
if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d][i]) {
th = document.createElement("th");
th.innerHTML = outletandCounterWiseCompleteTotal[d][i];
headerRow.appendChild(th);
} else {
th = document.createElement("th");
th.innerHTML = 0;
headerRow.appendChild(th);
}
});
});
thead.appendChild(headerRow);
table.appendChild(tbody);
let divContainer = document.getElementById("tbl");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
var dataObj = formatData(data);
addTable(dataObj);
javascript jquery html
asked Nov 9 at 9:36
dheeraj kumar
868
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I have a form in my ui(HTML page) where i have some input fields and a search button(submit),on clicking search wht i am doing is hiding the form and showing some content in a div tag (content is HTML table).That HTML table has a export button which is there to export the table content into a excel sheet.
but on clicking the search button of form the export button loaded first and the table lodes after that
like this
here is my HTML form and after that form my div container which have table as well as export button
<form id="formId" method="get">
<div class="container">
<h4>Start Date:</h4>
<input type="text" id="startdate" name="fromdate" width="276"
placeholder="dd/mm/yyyy" required onchange="checkDate()" />
<h4>End Date:</h4>
<input type="text" id="enddate" name="todate" width="276"
placeholder="dd/mm/yyyy" required onchange="checkDate()"/>
<h4>Outlets:</h4>
<select id="all" name="outlet">
<option>ALL</option>
<c:forEach var="item" items="${obj.outlet}">
<option>${item}</option>
</c:forEach>
</select>
<div><br>
</div>
<div>
<br>
<button id="button" class="btn btn-default" type="submit">Search</button>
</div>
</div>
</form>
<div id="tableContainer" class="container-fluid">
<div id="tbl" ></div>
<button id="export">Export</button>
</div>
and here is my javascript by which i am making the ajax call
$(document).ready(function() {
$("#formId").submit(function(event) {
event.preventDefault();
$.ajax({
url : "URL",
method : "GET",
dataType : "json",
contentType: "application/json; charset=utf-8",
data : {
fromdate : $("#startdate").val(),
todate : $("#enddate").val(),
outlet : $("#all").val()
},
success : function(data) {
// console.log("test",tableValue);
$("#formId").hide();
var dataObj = formatData(data);
addTable(dataObj);
}
});
this my code to initially hide the table
$(document).ready(function() {
//at beginning
$('#tableContainer').hide();
$('#button').click(function (e) {
$('#tableContainer').show();
});
$("#export").click(function() {
$("#tbl").table2excel({
filename : "filenameSales.xls"
});
});
});
i just want that the export button should loaded after the table, here i am hiding form and after that showing all the data into new div tag.
how can i achieve that anyone have any idea please guide me.
this is the full code with json.by this code i am manupulating the j
data=[
{
"amount": 11750,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SARJAPURA ROAD"
},
{
"amount": 11030,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SINGASANDRA"
},
{
"amount": 11619,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SPICE GARDEN"
},
{
"amount": 45229,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "Chef Bakers Whitefield"
},
{
"amount": 38239,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "CHEF BAKERS YELAHANKA"
},
{
"amount": 7230,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ARAKERE"
},
{
"amount": 14836,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS AYYAPPA NGR"
},
{
"amount": 13984,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 1053,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS CHANDAPURA"
},
{
"amount": 16239,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Doddanekkundi"
},
{
"amount": 9575,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SIDDAPURA"
},
{
"amount": 17965,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ECITY"
},
{
"amount": 2644,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS VYDEHI"
},
{
"amount": 4250,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Hennur Main Road"
},
{
"amount": 17303,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS KADUBEESANAHALLI"
},
{
"amount": 15680,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS COFFEE BOARD"
},
{
"amount": 8035,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Kaggadasapura"
},
{
"amount": 4415,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Koramangala"
},
{
"amount": 8785,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Marathahalli 1"
},
{
"amount": 10425,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef bakers Marathahalli 2"
},
{
"amount": 12625,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Mahadevapura"
},
{
"amount": 12340,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS BEL LAYOUT"
},
{
"amount": 12040,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS MG ROAD"
},
{
"amount": 13859,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS NAGAWARA"
},
{
"amount": 9125,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRESTIGE SHANTHINIKETAN"
},
{
"amount": 24780,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS RR NAGAR"
},
{
"amount": 27865,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Kadugodi"
},
{
"amount": 11285,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SARJAPURA ROAD"
},
{
"amount": 3305,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SINGASANDRA"
},
{
"amount": 12625,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SPICE GARDEN"
},
{
"amount": 33766,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Whitefield"
},
{
"amount": 34300,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS YELAHANKA"
},
{
"amount": 6751,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ARAKERE"
},
{
"amount": 12626,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS AYYAPPA NGR"
},
{
"amount": 33020,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 450,
"billdate": "2018-05-07",
"counter": "Take Away",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 2215,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS CHANDAPURA"
},
{
"amount": 6518,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Doddanekkundi"
},
{
"amount": 11305,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SIDDAPURA"
},
{
"amount": 11990,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ECITY"
},
{
"amount": 11350,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS VYDEHI"
},
{
"amount": 5440,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Hennur Main Road"
},
{
"amount": 20707,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS KADUBEESANAHALLI"
},
{
"amount": 14155,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS COFFEE BOARD"
},
{
"amount": 5285,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Kaggadasapura"
},
{
"amount": 5404,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Koramangala"
},
{
"amount": 5200,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Marathahalli 1"
},
{
"amount": 13000,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef bakers Marathahalli 2"
},
{
"amount": 20049,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Mahadevapura"
},
{
"amount": 10592,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS BEL LAYOUT"
},
{
"amount": 9934,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS MG ROAD"
},
{
"amount": 9803,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS NAGAWARA"
},
{
"amount": 13877,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRESTIGE SHANTHINIKETAN"
},
{
"amount": 42368,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRITECH"
},
{
"amount": 13173,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS RR NAGAR"
},
{
"amount": 26263,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Kadugodi"
},
{
"amount": 7250,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SARJAPURA ROAD"
},
{
"amount": 3100,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SINGASANDRA"
},
{
"amount": 9870,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SPICE GARDEN"
},
{
"amount": 23093,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Whitefield"
},
{
"amount": 20805,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS YELAHANKA"
},
{
"amount": 4140,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ARAKERE"
},
{
"amount": 11137,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS AYYAPPA NGR"
},
{
"amount": 33034,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 700,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS CHANDAPURA"
},
{
"amount": 12351,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Doddanekkundi"
},
{
"amount": 12190,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SIDDAPURA"
},
{
"amount": 13269,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ECITY"
},
{
"amount": 10023,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS VYDEHI"
},
{
"amount": 5180,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Hennur Main Road"
},
{
"amount": 22279,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS KADUBEESANAHALLI"
},
{
"amount": 17543,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS COFFEE BOARD"
},
{
"amount": 11850,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Kaggadasapura"
},
{
"amount": 7634,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Koramangala"
},
{
"amount": 8175,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Marathahalli 1"
},
{
"amount": 13159,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef bakers Marathahalli 2"
},
{
"amount": 21519,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Mahadevapura"
},
{
"amount": 7610,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS BEL LAYOUT"
},
{
"amount": 7634,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS MG ROAD"
},
{
"amount": 23463,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS MANYATA TECH PARK"
},
{
"amount": 14705,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS NAGAWARA"
},
{
"amount": 9020,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRESTIGE SHANTHINIKETAN"
},
{
"amount": 40225,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRITECH"
},
{
"amount": 11430,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS RR NAGAR"
},
{
"amount": 21596,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Kadugodi"
},
{
"amount": 7000,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SARJAPURA ROAD"
},
{
"amount": 3050,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SINGASANDRA"
},
{
"amount": 6705,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SPICE GARDEN"
},
{
"amount": 29221,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Whitefield"
},
{
"amount": 24020,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS YELAHANKA"
},
{
"amount": 5410,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ARAKERE"
},
{
"amount": 13660,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 1073,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS CHANDAPURA"
},
{
"amount": 8995,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Doddanekkundi"
},
{
"amount": 13405,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SIDDAPURA"
},
{
"amount": 14910,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ECITY"
},
{
"amount": 9730,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS VYDEHI"
},
{
"amount": 4001,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Hennur Main Road"
},
{
"amount": 16252,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS KADUBEESANAHALLI"
},
{
"amount": 6490,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Kaggadasapura"
},
{
"amount": 6913,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Koramangala"
},
{
"amount": 13493,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Marathahalli 1"
},
]
function formatData(data) {
let toReturn = ;
let dateWiseObj = {};
let maxUniqueForOutlets = {};
data.forEach(function (d) {
if (!maxUniqueForOutlets[d["outlet"]]) {
maxUniqueForOutlets[d["outlet"]] = ;
}
if (maxUniqueForOutlets[d["outlet"]].indexOf(d["counter"]) == -1) {
maxUniqueForOutlets[d["outlet"]].push(d["counter"]);
}
if (!dateWiseObj[d["billdate"]]) {
dateWiseObj[d["billdate"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
} else {
if (!dateWiseObj[d["billdate"]][d["outlet"]]) {
dateWiseObj[d["billdate"]][d["outlet"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
} else {
if (!dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]]) {
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
}
}
}
});
return {
dateWiseObj: dateWiseObj,
maxUniqueForOutlets: maxUniqueForOutlets
};
};
function addTable(dataObj) {
let dateWiseObj = dataObj.dateWiseObj;
let maxUniqueForOutlets = dataObj.maxUniqueForOutlets;
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "Outlet";
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
Object.keys(maxUniqueForOutlets).forEach(function (d) {
th = document.createElement("th");
th.innerHTML = d;
th.colSpan = maxUniqueForOutlets[d].length + 1;
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "Bill_____Date";
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Counter";
headerRow.appendChild(th);
Object.keys(maxUniqueForOutlets).forEach(function (k) {
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
maxUniqueForOutlets[k].forEach(function (d) {
th = document.createElement("th");
th.innerHTML = d;
headerRow.appendChild(th);
});
});
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
headerRow = document.createElement("tr");
let completeTotal = 0;
let outletandCounterWiseCompleteTotal = {};
Object.keys(dateWiseObj).forEach(function (k) {
let row = document.createElement("tr");
let td = document.createElement("td");
td.innerHTML = k;
row.appendChild(td);
grandTotal = 0;
outletWiseTotal = {};
Object.keys(maxUniqueForOutlets).map(function (d) {
if (!outletandCounterWiseCompleteTotal[d])
outletandCounterWiseCompleteTotal[d] = {};
outletWiseTotal[d] = 0;
if (dateWiseObj[k][d]) {
Object.keys(dateWiseObj[k][d]).forEach(function (i) {
if (outletandCounterWiseCompleteTotal[d][i]) {
outletandCounterWiseCompleteTotal[d][i] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
} else {
outletandCounterWiseCompleteTotal[d][i] = parseInt(dateWiseObj[k][d][i]["amount"] || "0");
}
outletWiseTotal[d] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
});
}
if (outletandCounterWiseCompleteTotal[d]["total"])
outletandCounterWiseCompleteTotal[d]["total"] += outletWiseTotal[d];
else
outletandCounterWiseCompleteTotal[d]["total"] = outletWiseTotal[d];
grandTotal += outletWiseTotal[d];
});
td = document.createElement("td");
td.innerHTML = grandTotal;
row.appendChild(td);
Object.keys(maxUniqueForOutlets).map(function (d) {
td = document.createElement("td");
td.innerHTML = outletWiseTotal[d];
row.appendChild(td);
if (dateWiseObj[k][d]) {
maxUniqueForOutlets[d].forEach(function (i) {
td = document.createElement("td");
td.innerHTML = dateWiseObj[k][d][i] ? dateWiseObj[k][d][i]["amount"] : "0";
row.appendChild(td);
});
} else {
maxUniqueForOutlets[d].forEach(function (i) {
td = document.createElement("td");
td.innerHTML = "0";
row.appendChild(td);
});
}
});
tbody.appendChild(row);
completeTotal += grandTotal;
//console.log(outletWiseTotal);
});
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = completeTotal;
headerRow.appendChild(th);
Object.keys(maxUniqueForOutlets).forEach(function (d) {
if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d]["total"]) {
th = document.createElement("th");
th.innerHTML = outletandCounterWiseCompleteTotal[d]["total"];
headerRow.appendChild(th);
} else {
th = document.createElement("th");
th.innerHTML = 0;
headerRow.appendChild(th);
}
maxUniqueForOutlets[d].forEach(function (i) {
if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d][i]) {
th = document.createElement("th");
th.innerHTML = outletandCounterWiseCompleteTotal[d][i];
headerRow.appendChild(th);
} else {
th = document.createElement("th");
th.innerHTML = 0;
headerRow.appendChild(th);
}
});
});
thead.appendChild(headerRow);
table.appendChild(tbody);
let divContainer = document.getElementById("tbl");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
var dataObj = formatData(data);
addTable(dataObj);
javascript jquery html
asked Nov 9 at 9:36
dheeraj kumar
868
I have a form in my ui(HTML page) where i have some input fields and a search button(submit),on clicking search wht i am doing is hiding the form and showing some content in a div tag (content is HTML table).That HTML table has a export button which is there to export the table content into a excel sheet.
but on clicking the search button of form the export button loaded first and the table lodes after that
like this
here is my HTML form and after that form my div container which have table as well as export button
<form id="formId" method="get">
<div class="container">
<h4>Start Date:</h4>
<input type="text" id="startdate" name="fromdate" width="276"
placeholder="dd/mm/yyyy" required onchange="checkDate()" />
<h4>End Date:</h4>
<input type="text" id="enddate" name="todate" width="276"
placeholder="dd/mm/yyyy" required onchange="checkDate()"/>
<h4>Outlets:</h4>
<select id="all" name="outlet">
<option>ALL</option>
<c:forEach var="item" items="${obj.outlet}">
<option>${item}</option>
</c:forEach>
</select>
<div><br>
</div>
<div>
<br>
<button id="button" class="btn btn-default" type="submit">Search</button>
</div>
</div>
</form>
<div id="tableContainer" class="container-fluid">
<div id="tbl" ></div>
<button id="export">Export</button>
</div>
and here is my javascript by which i am making the ajax call
$(document).ready(function() {
$("#formId").submit(function(event) {
event.preventDefault();
$.ajax({
url : "URL",
method : "GET",
dataType : "json",
contentType: "application/json; charset=utf-8",
data : {
fromdate : $("#startdate").val(),
todate : $("#enddate").val(),
outlet : $("#all").val()
},
success : function(data) {
// console.log("test",tableValue);
$("#formId").hide();
var dataObj = formatData(data);
addTable(dataObj);
}
});
this my code to initially hide the table
$(document).ready(function() {
//at beginning
$('#tableContainer').hide();
$('#button').click(function (e) {
$('#tableContainer').show();
});
$("#export").click(function() {
$("#tbl").table2excel({
filename : "filenameSales.xls"
});
});
});
i just want that the export button should loaded after the table, here i am hiding form and after that showing all the data into new div tag.
how can i achieve that anyone have any idea please guide me.
this is the full code with json.by this code i am manupulating the j
data=[
{
"amount": 11750,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SARJAPURA ROAD"
},
{
"amount": 11030,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SINGASANDRA"
},
{
"amount": 11619,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SPICE GARDEN"
},
{
"amount": 45229,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "Chef Bakers Whitefield"
},
{
"amount": 38239,
"billdate": "2018-05-05",
"counter": "Fast Food",
"outlet": "CHEF BAKERS YELAHANKA"
},
{
"amount": 7230,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ARAKERE"
},
{
"amount": 14836,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS AYYAPPA NGR"
},
{
"amount": 13984,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 1053,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS CHANDAPURA"
},
{
"amount": 16239,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Doddanekkundi"
},
{
"amount": 9575,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SIDDAPURA"
},
{
"amount": 17965,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ECITY"
},
{
"amount": 2644,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS VYDEHI"
},
{
"amount": 4250,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Hennur Main Road"
},
{
"amount": 17303,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS KADUBEESANAHALLI"
},
{
"amount": 15680,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS COFFEE BOARD"
},
{
"amount": 8035,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Kaggadasapura"
},
{
"amount": 4415,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Koramangala"
},
{
"amount": 8785,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Marathahalli 1"
},
{
"amount": 10425,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef bakers Marathahalli 2"
},
{
"amount": 12625,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Mahadevapura"
},
{
"amount": 12340,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS BEL LAYOUT"
},
{
"amount": 12040,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS MG ROAD"
},
{
"amount": 13859,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS NAGAWARA"
},
{
"amount": 9125,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRESTIGE SHANTHINIKETAN"
},
{
"amount": 24780,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS RR NAGAR"
},
{
"amount": 27865,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Kadugodi"
},
{
"amount": 11285,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SARJAPURA ROAD"
},
{
"amount": 3305,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SINGASANDRA"
},
{
"amount": 12625,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SPICE GARDEN"
},
{
"amount": 33766,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "Chef Bakers Whitefield"
},
{
"amount": 34300,
"billdate": "2018-05-06",
"counter": "Fast Food",
"outlet": "CHEF BAKERS YELAHANKA"
},
{
"amount": 6751,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ARAKERE"
},
{
"amount": 12626,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS AYYAPPA NGR"
},
{
"amount": 33020,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 450,
"billdate": "2018-05-07",
"counter": "Take Away",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 2215,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS CHANDAPURA"
},
{
"amount": 6518,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Doddanekkundi"
},
{
"amount": 11305,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SIDDAPURA"
},
{
"amount": 11990,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ECITY"
},
{
"amount": 11350,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS VYDEHI"
},
{
"amount": 5440,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Hennur Main Road"
},
{
"amount": 20707,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS KADUBEESANAHALLI"
},
{
"amount": 14155,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS COFFEE BOARD"
},
{
"amount": 5285,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Kaggadasapura"
},
{
"amount": 5404,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Koramangala"
},
{
"amount": 5200,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Marathahalli 1"
},
{
"amount": 13000,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef bakers Marathahalli 2"
},
{
"amount": 20049,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Mahadevapura"
},
{
"amount": 10592,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS BEL LAYOUT"
},
{
"amount": 9934,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS MG ROAD"
},
{
"amount": 9803,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS NAGAWARA"
},
{
"amount": 13877,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRESTIGE SHANTHINIKETAN"
},
{
"amount": 42368,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRITECH"
},
{
"amount": 13173,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS RR NAGAR"
},
{
"amount": 26263,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Kadugodi"
},
{
"amount": 7250,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SARJAPURA ROAD"
},
{
"amount": 3100,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SINGASANDRA"
},
{
"amount": 9870,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SPICE GARDEN"
},
{
"amount": 23093,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "Chef Bakers Whitefield"
},
{
"amount": 20805,
"billdate": "2018-05-07",
"counter": "Fast Food",
"outlet": "CHEF BAKERS YELAHANKA"
},
{
"amount": 4140,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ARAKERE"
},
{
"amount": 11137,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS AYYAPPA NGR"
},
{
"amount": 33034,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 700,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS CHANDAPURA"
},
{
"amount": 12351,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Doddanekkundi"
},
{
"amount": 12190,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SIDDAPURA"
},
{
"amount": 13269,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ECITY"
},
{
"amount": 10023,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS VYDEHI"
},
{
"amount": 5180,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Hennur Main Road"
},
{
"amount": 22279,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS KADUBEESANAHALLI"
},
{
"amount": 17543,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS COFFEE BOARD"
},
{
"amount": 11850,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Kaggadasapura"
},
{
"amount": 7634,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Koramangala"
},
{
"amount": 8175,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Marathahalli 1"
},
{
"amount": 13159,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef bakers Marathahalli 2"
},
{
"amount": 21519,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Mahadevapura"
},
{
"amount": 7610,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS BEL LAYOUT"
},
{
"amount": 7634,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS MG ROAD"
},
{
"amount": 23463,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS MANYATA TECH PARK"
},
{
"amount": 14705,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS NAGAWARA"
},
{
"amount": 9020,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRESTIGE SHANTHINIKETAN"
},
{
"amount": 40225,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS PRITECH"
},
{
"amount": 11430,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS RR NAGAR"
},
{
"amount": 21596,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Kadugodi"
},
{
"amount": 7000,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SARJAPURA ROAD"
},
{
"amount": 3050,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SINGASANDRA"
},
{
"amount": 6705,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SPICE GARDEN"
},
{
"amount": 29221,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "Chef Bakers Whitefield"
},
{
"amount": 24020,
"billdate": "2018-05-08",
"counter": "Fast Food",
"outlet": "CHEF BAKERS YELAHANKA"
},
{
"amount": 5410,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ARAKERE"
},
{
"amount": 13660,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Bellandur"
},
{
"amount": 1073,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS CHANDAPURA"
},
{
"amount": 8995,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Doddanekkundi"
},
{
"amount": 13405,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS SIDDAPURA"
},
{
"amount": 14910,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS ECITY"
},
{
"amount": 9730,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS VYDEHI"
},
{
"amount": 4001,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Hennur Main Road"
},
{
"amount": 16252,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "CHEF BAKERS KADUBEESANAHALLI"
},
{
"amount": 6490,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Kaggadasapura"
},
{
"amount": 6913,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Koramangala"
},
{
"amount": 13493,
"billdate": "2018-05-09",
"counter": "Fast Food",
"outlet": "Chef Bakers Marathahalli 1"
},
]
function formatData(data) {
let toReturn = ;
let dateWiseObj = {};
let maxUniqueForOutlets = {};
data.forEach(function (d) {
if (!maxUniqueForOutlets[d["outlet"]]) {
maxUniqueForOutlets[d["outlet"]] = ;
}
if (maxUniqueForOutlets[d["outlet"]].indexOf(d["counter"]) == -1) {
maxUniqueForOutlets[d["outlet"]].push(d["counter"]);
}
if (!dateWiseObj[d["billdate"]]) {
dateWiseObj[d["billdate"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
} else {
if (!dateWiseObj[d["billdate"]][d["outlet"]]) {
dateWiseObj[d["billdate"]][d["outlet"]] = {};
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
} else {
if (!dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]]) {
dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
}
}
}
});
return {
dateWiseObj: dateWiseObj,
maxUniqueForOutlets: maxUniqueForOutlets
};
};
function addTable(dataObj) {
let dateWiseObj = dataObj.dateWiseObj;
let maxUniqueForOutlets = dataObj.maxUniqueForOutlets;
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "Outlet";
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
Object.keys(maxUniqueForOutlets).forEach(function (d) {
th = document.createElement("th");
th.innerHTML = d;
th.colSpan = maxUniqueForOutlets[d].length + 1;
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "Bill_____Date";
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Counter";
headerRow.appendChild(th);
Object.keys(maxUniqueForOutlets).forEach(function (k) {
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
maxUniqueForOutlets[k].forEach(function (d) {
th = document.createElement("th");
th.innerHTML = d;
headerRow.appendChild(th);
});
});
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
headerRow = document.createElement("tr");
let completeTotal = 0;
let outletandCounterWiseCompleteTotal = {};
Object.keys(dateWiseObj).forEach(function (k) {
let row = document.createElement("tr");
let td = document.createElement("td");
td.innerHTML = k;
row.appendChild(td);
grandTotal = 0;
outletWiseTotal = {};
Object.keys(maxUniqueForOutlets).map(function (d) {
if (!outletandCounterWiseCompleteTotal[d])
outletandCounterWiseCompleteTotal[d] = {};
outletWiseTotal[d] = 0;
if (dateWiseObj[k][d]) {
Object.keys(dateWiseObj[k][d]).forEach(function (i) {
if (outletandCounterWiseCompleteTotal[d][i]) {
outletandCounterWiseCompleteTotal[d][i] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
} else {
outletandCounterWiseCompleteTotal[d][i] = parseInt(dateWiseObj[k][d][i]["amount"] || "0");
}
outletWiseTotal[d] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
});
}
if (outletandCounterWiseCompleteTotal[d]["total"])
outletandCounterWiseCompleteTotal[d]["total"] += outletWiseTotal[d];
else
outletandCounterWiseCompleteTotal[d]["total"] = outletWiseTotal[d];
grandTotal += outletWiseTotal[d];
});
td = document.createElement("td");
td.innerHTML = grandTotal;
row.appendChild(td);
Object.keys(maxUniqueForOutlets).map(function (d) {
td = document.createElement("td");
td.innerHTML = outletWiseTotal[d];
row.appendChild(td);
if (dateWiseObj[k][d]) {
maxUniqueForOutlets[d].forEach(function (i) {
td = document.createElement("td");
td.innerHTML = dateWiseObj[k][d][i] ? dateWiseObj[k][d][i]["amount"] : "0";
row.appendChild(td);
});
} else {
maxUniqueForOutlets[d].forEach(function (i) {
td = document.createElement("td");
td.innerHTML = "0";
row.appendChild(td);
});
}
});
tbody.appendChild(row);
completeTotal += grandTotal;
//console.log(outletWiseTotal);
});
th = document.createElement("th");
th.innerHTML = "Total";
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = completeTotal;
headerRow.appendChild(th);
Object.keys(maxUniqueForOutlets).forEach(function (d) {
if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d]["total"]) {
th = document.createElement("th");
th.innerHTML = outletandCounterWiseCompleteTotal[d]["total"];
headerRow.appendChild(th);
} else {
th = document.createElement("th");
th.innerHTML = 0;
headerRow.appendChild(th);
}
maxUniqueForOutlets[d].forEach(function (i) {
if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d][i]) {
th = document.createElement("th");
th.innerHTML = outletandCounterWiseCompleteTotal[d][i];
headerRow.appendChild(th);
} else {
th = document.createElement("th");
th.innerHTML = 0;
headerRow.appendChild(th);
}
});
});
thead.appendChild(headerRow);
table.appendChild(tbody);
let divContainer = document.getElementById("tbl");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
var dataObj = formatData(data);
addTable(dataObj);
javascript jquery html
javascript jquery html
asked Nov 9 at 9:36
dheeraj kumar
868
asked Nov 9 at 9:36
dheeraj kumar
868
edited Nov 9 at 10:09
asked Nov 9 at 9:36
dheeraj kumar
868
asked Nov 9 at 9:36
dheeraj kumar
868
asked Nov 9 at 9:36
dheeraj kumar
868
868
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
Personally I would add a CSS class to a high level DOM element such as the BODY tag when the data has loaded to help trigger the style changes you desire. Doing it at such a high level like the body leaves scope for expansion in the future. So do that in the success function of your AJAX request as below:
$(document).ready(function() {
$("#formId").submit(function(event) {
event.preventDefault();
$.ajax({
url : "URL",
method : "GET",
dataType : "json",
contentType: "application/json; charset=utf-8",
data : {
fromdate : $("#startdate").val(),
todate : $("#enddate").val(),
outlet : $("#all").val()
},
success : function(data) {
// console.log("test",tableValue);
$("body").addClass('data-loaded');
var dataObj = formatData(data);
addTable(dataObj);
}
});Note I've also removed $("#formId").hide(); as you could now use my new class to hide the button using CSS so .data-loaded #formId {display none;}. You could then do the opposite CSS for your table to make it appear when the body has that class.
It's also not great user experience to hide user controls like forms when they're used in this way. It would be better to keep your form visible, show the results immediately below and have a Search Again button which deletes any previous search results before performing a new search. This is obviously more work but your users will appreciate the extra effort for sure.
answered Nov 9 at 10:23
James Howell
3272823
i got your point like you are saying, i should display the HTML table below the form there is no need to hide the form right?
– dheeraj kumar
Nov 9 at 10:26
Yeah I've built a lot of search results pages in my time and its always bad form to hide the controls. What if a user realises they've used the wrong start/end date and want to amend their results? Hiding the form would make that impossible. So make sure you have some JQuery/Javascript in place which resets your form back to an untouched state after a search and then you can add a Search Again button which just removes the .data-loaded class.
– James Howell
Nov 9 at 10:31
so how can this remove my overlapping of buttons problem?
– dheeraj kumar
Nov 9 at 10:35
Because you would hide your Export button with CSS by default and then show it when the body has the .data-loaded class. So the Export button would only show when the table is full with data and visible on screen.
– James Howell
Nov 9 at 10:48
ok let me try if ill face any problem i ll ask you.
– dheeraj kumar
Nov 9 at 10:50
|
show 2 more comments
up vote
0
down vote
The tableContainer should be initially hidden, and when the table done loading, set it to visible. No need to try to do it on button level. The exact code would depend on what lib you use to create your table
@edit:
Oh, since you are doing it in pure Javascript and manipulate the DOM in this way,just add this at the end of addTable
$("#tableContainer").show();
And look for the place your code previously unhide the tableContainer. Since you hide it in document ready, there must be somewhere it got unhide in the code that was not in what you posted
@edit 2: Also delete
$('#button').click(function (e) {
$('#tableContainer').show();
});
answered Nov 9 at 9:49
Loredra L
582518
You should post the working code as example to make your answer more valuable.
– ADreNaLiNe-DJ
Nov 9 at 9:51
look an edit is made to the post .. i am doing as it is
– dheeraj kumar
Nov 9 at 9:57
I need the code that made the table itself. The name of the lib is enough. Basically the code inside addTable(dataObj);
– Loredra L
Nov 9 at 9:59
@LoredraL check i have updated.
– dheeraj kumar
Nov 9 at 10:09
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review
– Mustapha Larhrouch
Nov 9 at 10:17
|
show 2 more comments
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Personally I would add a CSS class to a high level DOM element such as the BODY tag when the data has loaded to help trigger the style changes you desire. Doing it at such a high level like the body leaves scope for expansion in the future. So do that in the success function of your AJAX request as below:
$(document).ready(function() {
$("#formId").submit(function(event) {
event.preventDefault();
$.ajax({
url : "URL",
method : "GET",
dataType : "json",
contentType: "application/json; charset=utf-8",
data : {
fromdate : $("#startdate").val(),
todate : $("#enddate").val(),
outlet : $("#all").val()
},
success : function(data) {
// console.log("test",tableValue);
$("body").addClass('data-loaded');
var dataObj = formatData(data);
addTable(dataObj);
}
});Note I've also removed $("#formId").hide(); as you could now use my new class to hide the button using CSS so .data-loaded #formId {display none;}. You could then do the opposite CSS for your table to make it appear when the body has that class.
It's also not great user experience to hide user controls like forms when they're used in this way. It would be better to keep your form visible, show the results immediately below and have a Search Again button which deletes any previous search results before performing a new search. This is obviously more work but your users will appreciate the extra effort for sure.
answered Nov 9 at 10:23
James Howell
3272823
i got your point like you are saying, i should display the HTML table below the form there is no need to hide the form right?
– dheeraj kumar
Nov 9 at 10:26
Yeah I've built a lot of search results pages in my time and its always bad form to hide the controls. What if a user realises they've used the wrong start/end date and want to amend their results? Hiding the form would make that impossible. So make sure you have some JQuery/Javascript in place which resets your form back to an untouched state after a search and then you can add a Search Again button which just removes the .data-loaded class.
– James Howell
Nov 9 at 10:31
so how can this remove my overlapping of buttons problem?
– dheeraj kumar
Nov 9 at 10:35
Because you would hide your Export button with CSS by default and then show it when the body has the .data-loaded class. So the Export button would only show when the table is full with data and visible on screen.
– James Howell
Nov 9 at 10:48
ok let me try if ill face any problem i ll ask you.
– dheeraj kumar
Nov 9 at 10:50
|
show 2 more comments
up vote
0
down vote
Personally I would add a CSS class to a high level DOM element such as the BODY tag when the data has loaded to help trigger the style changes you desire. Doing it at such a high level like the body leaves scope for expansion in the future. So do that in the success function of your AJAX request as below:
$(document).ready(function() {
$("#formId").submit(function(event) {
event.preventDefault();
$.ajax({
url : "URL",
method : "GET",
dataType : "json",
contentType: "application/json; charset=utf-8",
data : {
fromdate : $("#startdate").val(),
todate : $("#enddate").val(),
outlet : $("#all").val()
},
success : function(data) {
// console.log("test",tableValue);
$("body").addClass('data-loaded');
var dataObj = formatData(data);
addTable(dataObj);
}
});Note I've also removed $("#formId").hide(); as you could now use my new class to hide the button using CSS so .data-loaded #formId {display none;}. You could then do the opposite CSS for your table to make it appear when the body has that class.
It's also not great user experience to hide user controls like forms when they're used in this way. It would be better to keep your form visible, show the results immediately below and have a Search Again button which deletes any previous search results before performing a new search. This is obviously more work but your users will appreciate the extra effort for sure.
answered Nov 9 at 10:23
James Howell
3272823
i got your point like you are saying, i should display the HTML table below the form there is no need to hide the form right?
– dheeraj kumar
Nov 9 at 10:26
Yeah I've built a lot of search results pages in my time and its always bad form to hide the controls. What if a user realises they've used the wrong start/end date and want to amend their results? Hiding the form would make that impossible. So make sure you have some JQuery/Javascript in place which resets your form back to an untouched state after a search and then you can add a Search Again button which just removes the .data-loaded class.
– James Howell
Nov 9 at 10:31
so how can this remove my overlapping of buttons problem?
– dheeraj kumar
Nov 9 at 10:35
Because you would hide your Export button with CSS by default and then show it when the body has the .data-loaded class. So the Export button would only show when the table is full with data and visible on screen.
– James Howell
Nov 9 at 10:48
ok let me try if ill face any problem i ll ask you.
– dheeraj kumar
Nov 9 at 10:50
|
show 2 more comments
up vote
0
down vote
up vote
0
down vote
Personally I would add a CSS class to a high level DOM element such as the BODY tag when the data has loaded to help trigger the style changes you desire. Doing it at such a high level like the body leaves scope for expansion in the future. So do that in the success function of your AJAX request as below:
$(document).ready(function() {
$("#formId").submit(function(event) {
event.preventDefault();
$.ajax({
url : "URL",
method : "GET",
dataType : "json",
contentType: "application/json; charset=utf-8",
data : {
fromdate : $("#startdate").val(),
todate : $("#enddate").val(),
outlet : $("#all").val()
},
success : function(data) {
// console.log("test",tableValue);
$("body").addClass('data-loaded');
var dataObj = formatData(data);
addTable(dataObj);
}
});Note I've also removed $("#formId").hide(); as you could now use my new class to hide the button using CSS so .data-loaded #formId {display none;}. You could then do the opposite CSS for your table to make it appear when the body has that class.
It's also not great user experience to hide user controls like forms when they're used in this way. It would be better to keep your form visible, show the results immediately below and have a Search Again button which deletes any previous search results before performing a new search. This is obviously more work but your users will appreciate the extra effort for sure.
answered Nov 9 at 10:23
James Howell
3272823
Personally I would add a CSS class to a high level DOM element such as the BODY tag when the data has loaded to help trigger the style changes you desire. Doing it at such a high level like the body leaves scope for expansion in the future. So do that in the success function of your AJAX request as below:
$(document).ready(function() {
$("#formId").submit(function(event) {
event.preventDefault();
$.ajax({
url : "URL",
method : "GET",
dataType : "json",
contentType: "application/json; charset=utf-8",
data : {
fromdate : $("#startdate").val(),
todate : $("#enddate").val(),
outlet : $("#all").val()
},
success : function(data) {
// console.log("test",tableValue);
$("body").addClass('data-loaded');
var dataObj = formatData(data);
addTable(dataObj);
}
});Note I've also removed $("#formId").hide(); as you could now use my new class to hide the button using CSS so .data-loaded #formId {display none;}. You could then do the opposite CSS for your table to make it appear when the body has that class.
It's also not great user experience to hide user controls like forms when they're used in this way. It would be better to keep your form visible, show the results immediately below and have a Search Again button which deletes any previous search results before performing a new search. This is obviously more work but your users will appreciate the extra effort for sure.
$(document).ready(function() {
$("#formId").submit(function(event) {
event.preventDefault();
$.ajax({
url : "URL",
method : "GET",
dataType : "json",
contentType: "application/json; charset=utf-8",
data : {
fromdate : $("#startdate").val(),
todate : $("#enddate").val(),
outlet : $("#all").val()
},
success : function(data) {
// console.log("test",tableValue);
$("body").addClass('data-loaded');
var dataObj = formatData(data);
addTable(dataObj);
}
}); $(document).ready(function() {
$("#formId").submit(function(event) {
event.preventDefault();
$.ajax({
url : "URL",
method : "GET",
dataType : "json",
contentType: "application/json; charset=utf-8",
data : {
fromdate : $("#startdate").val(),
todate : $("#enddate").val(),
outlet : $("#all").val()
},
success : function(data) {
// console.log("test",tableValue);
$("body").addClass('data-loaded');
var dataObj = formatData(data);
addTable(dataObj);
}
});answered Nov 9 at 10:23
James Howell
3272823
answered Nov 9 at 10:23
James Howell
3272823
answered Nov 9 at 10:23
James Howell
3272823
answered Nov 9 at 10:23
James Howell
3272823
3272823
i got your point like you are saying, i should display the HTML table below the form there is no need to hide the form right?
– dheeraj kumar
Nov 9 at 10:26
Yeah I've built a lot of search results pages in my time and its always bad form to hide the controls. What if a user realises they've used the wrong start/end date and want to amend their results? Hiding the form would make that impossible. So make sure you have some JQuery/Javascript in place which resets your form back to an untouched state after a search and then you can add a Search Again button which just removes the .data-loaded class.
– James Howell
Nov 9 at 10:31
so how can this remove my overlapping of buttons problem?
– dheeraj kumar
Nov 9 at 10:35
Because you would hide your Export button with CSS by default and then show it when the body has the .data-loaded class. So the Export button would only show when the table is full with data and visible on screen.
– James Howell
Nov 9 at 10:48
ok let me try if ill face any problem i ll ask you.
– dheeraj kumar
Nov 9 at 10:50
|
show 2 more comments
i got your point like you are saying, i should display the HTML table below the form there is no need to hide the form right?
– dheeraj kumar
Nov 9 at 10:26
Yeah I've built a lot of search results pages in my time and its always bad form to hide the controls. What if a user realises they've used the wrong start/end date and want to amend their results? Hiding the form would make that impossible. So make sure you have some JQuery/Javascript in place which resets your form back to an untouched state after a search and then you can add a Search Again button which just removes the .data-loaded class.
– James Howell
Nov 9 at 10:31
so how can this remove my overlapping of buttons problem?
– dheeraj kumar
Nov 9 at 10:35
Because you would hide your Export button with CSS by default and then show it when the body has the .data-loaded class. So the Export button would only show when the table is full with data and visible on screen.
– James Howell
Nov 9 at 10:48
ok let me try if ill face any problem i ll ask you.
– dheeraj kumar
Nov 9 at 10:50
i got your point like you are saying, i should display the HTML table below the form there is no need to hide the form right?
– dheeraj kumar
Nov 9 at 10:26
i got your point like you are saying, i should display the HTML table below the form there is no need to hide the form right?
– dheeraj kumar
Nov 9 at 10:26
Yeah I've built a lot of search results pages in my time and its always bad form to hide the controls. What if a user realises they've used the wrong start/end date and want to amend their results? Hiding the form would make that impossible. So make sure you have some JQuery/Javascript in place which resets your form back to an untouched state after a search and then you can add a Search Again button which just removes the .data-loaded class.
– James Howell
Nov 9 at 10:31
Yeah I've built a lot of search results pages in my time and its always bad form to hide the controls. What if a user realises they've used the wrong start/end date and want to amend their results? Hiding the form would make that impossible. So make sure you have some JQuery/Javascript in place which resets your form back to an untouched state after a search and then you can add a Search Again button which just removes the .data-loaded class.
– James Howell
Nov 9 at 10:31
so how can this remove my overlapping of buttons problem?
– dheeraj kumar
Nov 9 at 10:35
so how can this remove my overlapping of buttons problem?
– dheeraj kumar
Nov 9 at 10:35
Because you would hide your Export button with CSS by default and then show it when the body has the .data-loaded class. So the Export button would only show when the table is full with data and visible on screen.
– James Howell
Nov 9 at 10:48
Because you would hide your Export button with CSS by default and then show it when the body has the .data-loaded class. So the Export button would only show when the table is full with data and visible on screen.
– James Howell
Nov 9 at 10:48
ok let me try if ill face any problem i ll ask you.
– dheeraj kumar
Nov 9 at 10:50
ok let me try if ill face any problem i ll ask you.
– dheeraj kumar
Nov 9 at 10:50
|
show 2 more comments
up vote
0
down vote
The tableContainer should be initially hidden, and when the table done loading, set it to visible. No need to try to do it on button level. The exact code would depend on what lib you use to create your table
@edit:
Oh, since you are doing it in pure Javascript and manipulate the DOM in this way,just add this at the end of addTable
$("#tableContainer").show();
And look for the place your code previously unhide the tableContainer. Since you hide it in document ready, there must be somewhere it got unhide in the code that was not in what you posted
@edit 2: Also delete
$('#button').click(function (e) {
$('#tableContainer').show();
});
answered Nov 9 at 9:49
Loredra L
582518
You should post the working code as example to make your answer more valuable.
– ADreNaLiNe-DJ
Nov 9 at 9:51
look an edit is made to the post .. i am doing as it is
– dheeraj kumar
Nov 9 at 9:57
I need the code that made the table itself. The name of the lib is enough. Basically the code inside addTable(dataObj);
– Loredra L
Nov 9 at 9:59
@LoredraL check i have updated.
– dheeraj kumar
Nov 9 at 10:09
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review
– Mustapha Larhrouch
Nov 9 at 10:17
|
show 2 more comments
up vote
0
down vote
The tableContainer should be initially hidden, and when the table done loading, set it to visible. No need to try to do it on button level. The exact code would depend on what lib you use to create your table
@edit:
Oh, since you are doing it in pure Javascript and manipulate the DOM in this way,just add this at the end of addTable
$("#tableContainer").show();
And look for the place your code previously unhide the tableContainer. Since you hide it in document ready, there must be somewhere it got unhide in the code that was not in what you posted
@edit 2: Also delete
$('#button').click(function (e) {
$('#tableContainer').show();
});
answered Nov 9 at 9:49
Loredra L
582518
You should post the working code as example to make your answer more valuable.
– ADreNaLiNe-DJ
Nov 9 at 9:51
look an edit is made to the post .. i am doing as it is
– dheeraj kumar
Nov 9 at 9:57
I need the code that made the table itself. The name of the lib is enough. Basically the code inside addTable(dataObj);
– Loredra L
Nov 9 at 9:59
@LoredraL check i have updated.
– dheeraj kumar
Nov 9 at 10:09
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review
– Mustapha Larhrouch
Nov 9 at 10:17
|
show 2 more comments
up vote
0
down vote
up vote
0
down vote
The tableContainer should be initially hidden, and when the table done loading, set it to visible. No need to try to do it on button level. The exact code would depend on what lib you use to create your table
@edit:
Oh, since you are doing it in pure Javascript and manipulate the DOM in this way,just add this at the end of addTable
$("#tableContainer").show();
And look for the place your code previously unhide the tableContainer. Since you hide it in document ready, there must be somewhere it got unhide in the code that was not in what you posted
@edit 2: Also delete
$('#button').click(function (e) {
$('#tableContainer').show();
});
answered Nov 9 at 9:49
Loredra L
582518
The tableContainer should be initially hidden, and when the table done loading, set it to visible. No need to try to do it on button level. The exact code would depend on what lib you use to create your table
@edit:
Oh, since you are doing it in pure Javascript and manipulate the DOM in this way,just add this at the end of addTable
$("#tableContainer").show();
And look for the place your code previously unhide the tableContainer. Since you hide it in document ready, there must be somewhere it got unhide in the code that was not in what you posted
@edit 2: Also delete
$('#button').click(function (e) {
$('#tableContainer').show();
});
answered Nov 9 at 9:49
Loredra L
582518
edited Nov 9 at 10:55
answered Nov 9 at 9:49
Loredra L
582518
answered Nov 9 at 9:49
Loredra L
582518
answered Nov 9 at 9:49
Loredra L
582518
582518
You should post the working code as example to make your answer more valuable.
– ADreNaLiNe-DJ
Nov 9 at 9:51
look an edit is made to the post .. i am doing as it is
– dheeraj kumar
Nov 9 at 9:57
I need the code that made the table itself. The name of the lib is enough. Basically the code inside addTable(dataObj);
– Loredra L
Nov 9 at 9:59
@LoredraL check i have updated.
– dheeraj kumar
Nov 9 at 10:09
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review
– Mustapha Larhrouch
Nov 9 at 10:17
|
show 2 more comments
You should post the working code as example to make your answer more valuable.
– ADreNaLiNe-DJ
Nov 9 at 9:51
look an edit is made to the post .. i am doing as it is
– dheeraj kumar
Nov 9 at 9:57
I need the code that made the table itself. The name of the lib is enough. Basically the code inside addTable(dataObj);
– Loredra L
Nov 9 at 9:59
@LoredraL check i have updated.
– dheeraj kumar
Nov 9 at 10:09
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review
– Mustapha Larhrouch
Nov 9 at 10:17
You should post the working code as example to make your answer more valuable.
– ADreNaLiNe-DJ
Nov 9 at 9:51
You should post the working code as example to make your answer more valuable.
– ADreNaLiNe-DJ
Nov 9 at 9:51
look an edit is made to the post .. i am doing as it is
– dheeraj kumar
Nov 9 at 9:57
look an edit is made to the post .. i am doing as it is
– dheeraj kumar
Nov 9 at 9:57
I need the code that made the table itself. The name of the lib is enough. Basically the code inside addTable(dataObj);
– Loredra L
Nov 9 at 9:59
I need the code that made the table itself. The name of the lib is enough. Basically the code inside addTable(dataObj);
– Loredra L
Nov 9 at 9:59
@LoredraL check i have updated.
– dheeraj kumar
Nov 9 at 10:09
@LoredraL check i have updated.
– dheeraj kumar
Nov 9 at 10:09
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review
– Mustapha Larhrouch
Nov 9 at 10:17
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review
– Mustapha Larhrouch
Nov 9 at 10:17
|
show 2 more comments
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53223135%2ftwo-buttons-are-overlapping-each-other%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
