How to make tbody of html table scroll verticallyHow can I let a table's body scroll but keep its head fixed in place?How to make div not larger than its contents?How to Check if element is visible after scrolling?How do I make the first letter of a string uppercase in JavaScript?Word-wrap in an HTML tableHow to make a div 100% height of the browser window?How to create an HTML button that acts like a link?How do I vertically align text in a div?Can we have multiple <tbody> in same <table>?How do I vertically center text with CSS?HTML table with 100% width, with vertical scroll inside tbody
Proof of Lemma: Every nonzero integer can be written as a product of primes
Database accidentally deleted with a bash script
Difference between -| and |- in TikZ
Freedom of speech and where it applies
Transformation of random variables and joint distributions
Varistor? Purpose and principle
Visiting the UK as unmarried couple
Why does Async/Await work properly when the loop is inside the async function and not the other way around?
Is camera lens focus an exact point or a range?
Proving a function is onto where f(x)=|x|.
Folder comparison
Can not upgrade Kali,not enough space in /var/cache/apt/archives
On a tidally locked planet, would time be quantized?
Can we have a perfect cadence in a minor key?
What linear sensor for a keyboard?
Divine apple island
Create all possible words using a set or letters
What does this horizontal bar at the first measure mean?
If a character with the Alert feat rolls a crit fail on their Perception check, are they surprised?
Did US corporations pay demonstrators in the German demonstrations against article 13?
Are lightweight LN wallets vulnerable to transaction withholding?
Engineer refusing to file/disclose patents
Could solar power be utilized and substitute coal in the 19th Century
Longest common substring in linear time
How to make tbody of html table scroll vertically
How can I let a table's body scroll but keep its head fixed in place?How to make div not larger than its contents?How to Check if element is visible after scrolling?How do I make the first letter of a string uppercase in JavaScript?Word-wrap in an HTML tableHow to make a div 100% height of the browser window?How to create an HTML button that acts like a link?How do I vertically align text in a div?Can we have multiple <tbody> in same <table>?How do I vertically center text with CSS?HTML table with 100% width, with vertical scroll inside tbody
9
I have A HTML table with JSON data in which dynamically i am trying to make tbody scroll vertically with fix header
- I am trying to make tbody scroll vertically so that user can see data in single page only
What i have done
var data = [
"billdate": "2018-08-01",
"outlet": "JAYANAGAR",
"gross": 274659,
"discount": 297,
"GST": 16479,
"amount": 290954
,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM",
"gross": 55185,
"discount": 0,
"GST": 3074,
"amount": 58281
,
"billdate": "2018-08-01",
"outlet": "KOLAR",
"gross": 62513,
"discount": 0,
"GST": 3306,
"amount": 65880
,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR",
"gross": 279509,
"discount": 68,
"GST": 16582,
"amount": 296125
,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM",
"gross": 53462,
"discount": 0,
"GST": 3064,
"amount": 56545
,
"billdate": "2018-08-02",
"outlet": "KOLAR",
"gross": 68651,
"discount": 0,
"GST": 3492,
"amount": 72213
,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR",
"gross": 327097,
"discount": 539,
"GST": 19945,
"amount": 346605
,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM",
"gross": 59341,
"discount": 105,
"GST": 3370,
"amount": 62459
,
"billdate": "2018-08-03",
"outlet": "KOLAR",
"gross": 61953,
"discount": 0,
"GST": 3225,
"amount": 65248
,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR",
"gross": 490465,
"discount": 839,
"GST": 28465,
"amount": 518212
,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM",
"gross": 99212,
"discount": 0,
"GST": 5567,
"amount": 104801
,
"billdate": "2018-08-04",
"outlet": "KOLAR",
"gross": 131349,
"discount": 0,
"GST": 6676,
"amount": 138151
,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR",
"gross": 594466,
"discount": 591,
"GST": 34374,
"amount": 628358
,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM",
"gross": 109134,
"discount": 0,
"GST": 6067,
"amount": 115223
,
"billdate": "2018-08-05",
"outlet": "KOLAR",
"gross": 127449,
"discount": 0,
"GST": 6511,
"amount": 134107
,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR",
"gross": 167811,
"discount": 0,
"GST": 9968,
"amount": 177866
,
"billdate": "2018-08-06",
"outlet": "KOLAR",
"gross": 62796,
"discount": 0,
"GST": 3257,
"amount": 66095
,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR",
"gross": 268298,
"discount": 268,
"GST": 15943,
"amount": 284069
,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM",
"gross": 55381,
"discount": 0,
"GST": 3383,
"amount": 58789
,
"billdate": "2018-08-07",
"outlet": "KOLAR",
"gross": 64586,
"discount": 6,
"GST": 3285,
"amount": 67886
,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR",
"gross": 295544,
"discount": 246,
"GST": 17716,
"amount": 313128
,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM",
"gross": 56453,
"discount": 0,
"GST": 3462,
"amount": 59939
,
"billdate": "2018-08-08",
"outlet": "KOLAR",
"gross": 65159,
"discount": 0,
"GST": 3381,
"amount": 68558
,
"billdate": "2018-08-09",
"outlet": "JAYANAGAR",
"gross": 303778,
"discount": 201,
"GST": 18115,
"amount": 321797
,
"billdate": "2018-08-09",
"outlet": "MALLESHWARAM",
"gross": 60795,
"discount": 0,
"GST": 3620,
"amount": 64431
,
"billdate": "2018-08-09",
"outlet": "KOLAR",
"gross": 54495,
"discount": 0,
"GST": 2841,
"amount": 57352
,
"billdate": "2018-08-10",
"outlet": "JAYANAGAR",
"gross": 305223,
"discount": 53,
"GST": 18287,
"amount": 323556
,
"billdate": "2018-08-10",
"outlet": "MALLESHWARAM",
"gross": 55584,
"discount": 36,
"GST": 3207,
"amount": 58772
,
"billdate": "2018-08-10",
"outlet": "KOLAR",
"gross": 41584,
"discount": 0,
"GST": 2128,
"amount": 43722
,
"billdate": "2018-08-11",
"outlet": "JAYANAGAR",
"gross": 439024,
"discount": 177,
"GST": 25148,
"amount": 464127
,
"billdate": "2018-08-11",
"outlet": "MALLESHWARAM",
"gross": 88009,
"discount": 0,
"GST": 5090,
"amount": 93110
,
"billdate": "2018-08-11",
"outlet": "KOLAR",
"gross": 59188,
"discount": 0,
"GST": 3156,
"amount": 62213
,
"billdate": "2018-08-12",
"outlet": "JAYANAGAR",
"gross": 593776,
"discount": 809,
"GST": 33689,
"amount": 626772
,
"billdate": "2018-08-12",
"outlet": "MALLESHWARAM",
"gross": 119723,
"discount": 45,
"GST": 7245,
"amount": 126933
,
"billdate": "2018-08-12",
"outlet": "KOLAR",
"gross": 59926,
"discount": 0,
"GST": 3170,
"amount": 63119
,
"billdate": "2018-08-13",
"outlet": "JAYANAGAR",
"gross": 157580,
"discount": 340,
"GST": 10053,
"amount": 167391
,
"billdate": "2018-08-13",
"outlet": "KOLAR",
"gross": 25730,
"discount": 0,
"GST": 1368,
"amount": 27110
,
"billdate": "2018-08-14",
"outlet": "JAYANAGAR",
"gross": 260106,
"discount": 298,
"GST": 15181,
"amount": 275115
,
"billdate": "2018-08-14",
"outlet": "MALLESHWARAM",
"gross": 55145,
"discount": 19,
"GST": 3480,
"amount": 58633
,
"billdate": "2018-08-14",
"outlet": "KOLAR",
"gross": 36664,
"discount": 0,
"GST": 1916,
"amount": 37920
,
"billdate": "2018-08-15",
"outlet": "JAYANAGAR",
"gross": 478163,
"discount": 688,
"GST": 27138,
"amount": 504753
,
"billdate": "2018-08-15",
"outlet": "MALLESHWARAM",
"gross": 98179,
"discount": 0,
"GST": 5661,
"amount": 103855
,
"billdate": "2018-08-15",
"outlet": "KOLAR",
"gross": 98536,
"discount": 0,
"GST": 4964,
"amount": 103519
,
"billdate": "2018-08-16",
"outlet": "JAYANAGAR",
"gross": 277139,
"discount": 594,
"GST": 16406,
"amount": 293049
,
"billdate": "2018-08-16",
"outlet": "MALLESHWARAM",
"gross": 52828,
"discount": 0,
"GST": 3227,
"amount": 56071
,
"billdate": "2018-08-16",
"outlet": "KOLAR",
"gross": 53312,
"discount": 0,
"GST": 2730,
"amount": 56061
,
"billdate": "2018-08-17",
"outlet": "JAYANAGAR",
"gross": 329539,
"discount": 91,
"GST": 19882,
"amount": 349456
,
"billdate": "2018-08-17",
"outlet": "MALLESHWARAM",
"gross": 62946,
"discount": 0,
"GST": 3659,
"amount": 66624
,
"billdate": "2018-08-17",
"outlet": "KOLAR",
"gross": 69126,
"discount": 0,
"GST": 3501,
"amount": 72643
,
"billdate": "2018-08-18",
"outlet": "JAYANAGAR",
"gross": 443783,
"discount": 724,
"GST": 25712,
"amount": 468771
,
"billdate": "2018-08-18",
"outlet": "MALLESHWARAM",
"gross": 95622,
"discount": 0,
"GST": 5507,
"amount": 101151
,
"billdate": "2018-08-18",
"outlet": "KOLAR",
"gross": 107235,
"discount": 0,
"GST": 5683,
"amount": 112950
,
"billdate": "2018-08-19",
"outlet": "JAYANAGAR",
"gross": 517922,
"discount": 181,
"GST": 28972,
"amount": 546845
,
"billdate": "2018-08-19",
"outlet": "MALLESHWARAM",
"gross": 96821,
"discount": 0,
"GST": 5490,
"amount": 102334
,
"billdate": "2018-08-19",
"outlet": "KOLAR",
"gross": 94158,
"discount": 0,
"GST": 4909,
"amount": 99089
,
"billdate": "2018-08-20",
"outlet": "JAYANAGAR",
"gross": 156224,
"discount": 35,
"GST": 9423,
"amount": 165700
,
"billdate": "2018-08-20",
"outlet": "KOLAR",
"gross": 45547,
"discount": 0,
"GST": 2347,
"amount": 47905
,
"billdate": "2018-08-21",
"outlet": "JAYANAGAR",
"gross": 289268,
"discount": 214,
"GST": 17613,
"amount": 306776
,
"billdate": "2018-08-21",
"outlet": "MALLESHWARAM",
"gross": 57684,
"discount": 0,
"GST": 3374,
"amount": 61080
,
"billdate": "2018-08-21",
"outlet": "KOLAR",
"gross": 57725,
"discount": 0,
"GST": 2950,
"amount": 60682
,
"billdate": "2018-08-22",
"outlet": "JAYANAGAR",
"gross": 395657,
"discount": 159,
"GST": 22808,
"amount": 418418
,
"billdate": "2018-08-22",
"outlet": "MALLESHWARAM",
"gross": 82752,
"discount": 0,
"GST": 4618,
"amount": 87390
,
"billdate": "2018-08-22",
"outlet": "KOLAR",
"gross": 74048,
"discount": 0,
"GST": 3953,
"amount": 77922
,
"billdate": "2018-08-23",
"outlet": "JAYANAGAR",
"gross": 302731,
"discount": 1124,
"GST": 17774,
"amount": 319472
,
"billdate": "2018-08-23",
"outlet": "MALLESHWARAM",
"gross": 63555,
"discount": 0,
"GST": 3565,
"amount": 67142
,
"billdate": "2018-08-23",
"outlet": "KOLAR",
"gross": 53637,
"discount": 0,
"GST": 2860,
"amount": 56506
,
"billdate": "2018-08-24",
"outlet": "JAYANAGAR",
"gross": 284354,
"discount": 774,
"GST": 16423,
"amount": 300111
,
"billdate": "2018-08-24",
"outlet": "MALLESHWARAM",
"gross": 48130,
"discount": 0,
"GST": 2857,
"amount": 50997
,
"billdate": "2018-08-24",
"outlet": "KOLAR",
"gross": 55040,
"discount": 0,
"GST": 2871,
"amount": 57926
]
let formatData = function(data)
let billdates = [];
let outlets = [];
data.forEach(element =>
if (billdates.indexOf(element.billdate) == -1)
billdates.push(element.billdate);
if (outlets.indexOf(element.outlet) == -1)
outlets.push(element.outlet);
);
return
data: data,
billdates: billdates,
outlets: outlets,
;
;
let renderTable = function(data)
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("dailySales");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "BillDate";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let grandGross = 0;
let grandDiscount = 0;
let grandGst = 0;
let outletWiseTotal = ;
let outletWiseGross = ;
let outletWiseDiscount = ;
let outletWiseGst = ;
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element =>
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
outletWiseGross[element] = 0;
outletWiseDiscount[element] = 0;
outletWiseGst[element] = 0;
data.forEach(el =>
if (el.outlet == element)
outletWiseTotal[element] += parseInt(el.amount);
outletWiseGross[element] += parseInt(el.gross);
outletWiseDiscount[element] += parseInt(el.discount);
outletWiseGst[element] += parseInt(el.GST);
);
grandTotal += outletWiseTotal[element];
grandGross += outletWiseGross[element];
grandDiscount += outletWiseDiscount[element];
grandGst += outletWiseGst[element];
);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "";
headerRow.appendChild(th);
for (i = 0; i < outlets.length + 1; i++)
th = document.createElement("th");
th.innerHTML = "Discount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "GST";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Net Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Gross Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
headerRow = document.createElement("tr");
td = document.createElement("th");
td.innerHTML = "Total";
td.classList.add("text-center");
headerRow.appendChild(td);
outlets.forEach(element =>
td = document.createElement("th");
td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
);
td = document.createElement("th");
td.innerHTML = grandTotal.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGst.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGross.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element =>
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
let totalGross = 0;
let totalDiscount = 0;
let totalGST = 0;
outlets.forEach(outlet =>
let ta = 0;
let tg = 0;
let tdi = 0;
let tgst = 0;
data.forEach(d =>
if (d.billdate == element && d.outlet == outlet)
total += parseInt(d.amount);
totalGross += parseInt(d.gross);
totalDiscount += parseInt(d.discount);
totalGST += parseInt(d.GST);
ta = d.amount;
tg = d.gross;
tdi = d.discount;
tgst = d.GST;
);
td = document.createElement("td");
td.innerHTML = tg.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tdi.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tgst.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = ta.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
);
/* console.log("row is : " , row.children ) */
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGST.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGross.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
tbody.appendChild(row);
);
table.appendChild(tbody);
tbl.innerHTML = "";
tbl.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
let formatedData = formatData(data);
renderTable(formatedData);table.table-bordered>thead>tr>th
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
/* background-color: #00998C */
table.table-bordered>tbody>tr>td
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 5px 5px 5px 5px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<h1>Testing</h1>
<div align="center" class="table table-responsive">
<table id="dailySales">
</table>
</div>as i have edited the code to make it clear what i am trying to achieve i am trying to make my tbody scroll
Any-kind of help will be appreciated
Note i am open to use any jquery,javascript resources which can fix headers
javascript jquery html css3 html-table
asked Mar 6 at 6:25
manish thakurmanish thakur
16713
|
show 5 more comments
9
I have A HTML table with JSON data in which dynamically i am trying to make tbody scroll vertically with fix header
- I am trying to make tbody scroll vertically so that user can see data in single page only
What i have done
var data = [
"billdate": "2018-08-01",
"outlet": "JAYANAGAR",
"gross": 274659,
"discount": 297,
"GST": 16479,
"amount": 290954
,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM",
"gross": 55185,
"discount": 0,
"GST": 3074,
"amount": 58281
,
"billdate": "2018-08-01",
"outlet": "KOLAR",
"gross": 62513,
"discount": 0,
"GST": 3306,
"amount": 65880
,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR",
"gross": 279509,
"discount": 68,
"GST": 16582,
"amount": 296125
,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM",
"gross": 53462,
"discount": 0,
"GST": 3064,
"amount": 56545
,
"billdate": "2018-08-02",
"outlet": "KOLAR",
"gross": 68651,
"discount": 0,
"GST": 3492,
"amount": 72213
,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR",
"gross": 327097,
"discount": 539,
"GST": 19945,
"amount": 346605
,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM",
"gross": 59341,
"discount": 105,
"GST": 3370,
"amount": 62459
,
"billdate": "2018-08-03",
"outlet": "KOLAR",
"gross": 61953,
"discount": 0,
"GST": 3225,
"amount": 65248
,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR",
"gross": 490465,
"discount": 839,
"GST": 28465,
"amount": 518212
,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM",
"gross": 99212,
"discount": 0,
"GST": 5567,
"amount": 104801
,
"billdate": "2018-08-04",
"outlet": "KOLAR",
"gross": 131349,
"discount": 0,
"GST": 6676,
"amount": 138151
,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR",
"gross": 594466,
"discount": 591,
"GST": 34374,
"amount": 628358
,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM",
"gross": 109134,
"discount": 0,
"GST": 6067,
"amount": 115223
,
"billdate": "2018-08-05",
"outlet": "KOLAR",
"gross": 127449,
"discount": 0,
"GST": 6511,
"amount": 134107
,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR",
"gross": 167811,
"discount": 0,
"GST": 9968,
"amount": 177866
,
"billdate": "2018-08-06",
"outlet": "KOLAR",
"gross": 62796,
"discount": 0,
"GST": 3257,
"amount": 66095
,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR",
"gross": 268298,
"discount": 268,
"GST": 15943,
"amount": 284069
,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM",
"gross": 55381,
"discount": 0,
"GST": 3383,
"amount": 58789
,
"billdate": "2018-08-07",
"outlet": "KOLAR",
"gross": 64586,
"discount": 6,
"GST": 3285,
"amount": 67886
,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR",
"gross": 295544,
"discount": 246,
"GST": 17716,
"amount": 313128
,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM",
"gross": 56453,
"discount": 0,
"GST": 3462,
"amount": 59939
,
"billdate": "2018-08-08",
"outlet": "KOLAR",
"gross": 65159,
"discount": 0,
"GST": 3381,
"amount": 68558
,
"billdate": "2018-08-09",
"outlet": "JAYANAGAR",
"gross": 303778,
"discount": 201,
"GST": 18115,
"amount": 321797
,
"billdate": "2018-08-09",
"outlet": "MALLESHWARAM",
"gross": 60795,
"discount": 0,
"GST": 3620,
"amount": 64431
,
"billdate": "2018-08-09",
"outlet": "KOLAR",
"gross": 54495,
"discount": 0,
"GST": 2841,
"amount": 57352
,
"billdate": "2018-08-10",
"outlet": "JAYANAGAR",
"gross": 305223,
"discount": 53,
"GST": 18287,
"amount": 323556
,
"billdate": "2018-08-10",
"outlet": "MALLESHWARAM",
"gross": 55584,
"discount": 36,
"GST": 3207,
"amount": 58772
,
"billdate": "2018-08-10",
"outlet": "KOLAR",
"gross": 41584,
"discount": 0,
"GST": 2128,
"amount": 43722
,
"billdate": "2018-08-11",
"outlet": "JAYANAGAR",
"gross": 439024,
"discount": 177,
"GST": 25148,
"amount": 464127
,
"billdate": "2018-08-11",
"outlet": "MALLESHWARAM",
"gross": 88009,
"discount": 0,
"GST": 5090,
"amount": 93110
,
"billdate": "2018-08-11",
"outlet": "KOLAR",
"gross": 59188,
"discount": 0,
"GST": 3156,
"amount": 62213
,
"billdate": "2018-08-12",
"outlet": "JAYANAGAR",
"gross": 593776,
"discount": 809,
"GST": 33689,
"amount": 626772
,
"billdate": "2018-08-12",
"outlet": "MALLESHWARAM",
"gross": 119723,
"discount": 45,
"GST": 7245,
"amount": 126933
,
"billdate": "2018-08-12",
"outlet": "KOLAR",
"gross": 59926,
"discount": 0,
"GST": 3170,
"amount": 63119
,
"billdate": "2018-08-13",
"outlet": "JAYANAGAR",
"gross": 157580,
"discount": 340,
"GST": 10053,
"amount": 167391
,
"billdate": "2018-08-13",
"outlet": "KOLAR",
"gross": 25730,
"discount": 0,
"GST": 1368,
"amount": 27110
,
"billdate": "2018-08-14",
"outlet": "JAYANAGAR",
"gross": 260106,
"discount": 298,
"GST": 15181,
"amount": 275115
,
"billdate": "2018-08-14",
"outlet": "MALLESHWARAM",
"gross": 55145,
"discount": 19,
"GST": 3480,
"amount": 58633
,
"billdate": "2018-08-14",
"outlet": "KOLAR",
"gross": 36664,
"discount": 0,
"GST": 1916,
"amount": 37920
,
"billdate": "2018-08-15",
"outlet": "JAYANAGAR",
"gross": 478163,
"discount": 688,
"GST": 27138,
"amount": 504753
,
"billdate": "2018-08-15",
"outlet": "MALLESHWARAM",
"gross": 98179,
"discount": 0,
"GST": 5661,
"amount": 103855
,
"billdate": "2018-08-15",
"outlet": "KOLAR",
"gross": 98536,
"discount": 0,
"GST": 4964,
"amount": 103519
,
"billdate": "2018-08-16",
"outlet": "JAYANAGAR",
"gross": 277139,
"discount": 594,
"GST": 16406,
"amount": 293049
,
"billdate": "2018-08-16",
"outlet": "MALLESHWARAM",
"gross": 52828,
"discount": 0,
"GST": 3227,
"amount": 56071
,
"billdate": "2018-08-16",
"outlet": "KOLAR",
"gross": 53312,
"discount": 0,
"GST": 2730,
"amount": 56061
,
"billdate": "2018-08-17",
"outlet": "JAYANAGAR",
"gross": 329539,
"discount": 91,
"GST": 19882,
"amount": 349456
,
"billdate": "2018-08-17",
"outlet": "MALLESHWARAM",
"gross": 62946,
"discount": 0,
"GST": 3659,
"amount": 66624
,
"billdate": "2018-08-17",
"outlet": "KOLAR",
"gross": 69126,
"discount": 0,
"GST": 3501,
"amount": 72643
,
"billdate": "2018-08-18",
"outlet": "JAYANAGAR",
"gross": 443783,
"discount": 724,
"GST": 25712,
"amount": 468771
,
"billdate": "2018-08-18",
"outlet": "MALLESHWARAM",
"gross": 95622,
"discount": 0,
"GST": 5507,
"amount": 101151
,
"billdate": "2018-08-18",
"outlet": "KOLAR",
"gross": 107235,
"discount": 0,
"GST": 5683,
"amount": 112950
,
"billdate": "2018-08-19",
"outlet": "JAYANAGAR",
"gross": 517922,
"discount": 181,
"GST": 28972,
"amount": 546845
,
"billdate": "2018-08-19",
"outlet": "MALLESHWARAM",
"gross": 96821,
"discount": 0,
"GST": 5490,
"amount": 102334
,
"billdate": "2018-08-19",
"outlet": "KOLAR",
"gross": 94158,
"discount": 0,
"GST": 4909,
"amount": 99089
,
"billdate": "2018-08-20",
"outlet": "JAYANAGAR",
"gross": 156224,
"discount": 35,
"GST": 9423,
"amount": 165700
,
"billdate": "2018-08-20",
"outlet": "KOLAR",
"gross": 45547,
"discount": 0,
"GST": 2347,
"amount": 47905
,
"billdate": "2018-08-21",
"outlet": "JAYANAGAR",
"gross": 289268,
"discount": 214,
"GST": 17613,
"amount": 306776
,
"billdate": "2018-08-21",
"outlet": "MALLESHWARAM",
"gross": 57684,
"discount": 0,
"GST": 3374,
"amount": 61080
,
"billdate": "2018-08-21",
"outlet": "KOLAR",
"gross": 57725,
"discount": 0,
"GST": 2950,
"amount": 60682
,
"billdate": "2018-08-22",
"outlet": "JAYANAGAR",
"gross": 395657,
"discount": 159,
"GST": 22808,
"amount": 418418
,
"billdate": "2018-08-22",
"outlet": "MALLESHWARAM",
"gross": 82752,
"discount": 0,
"GST": 4618,
"amount": 87390
,
"billdate": "2018-08-22",
"outlet": "KOLAR",
"gross": 74048,
"discount": 0,
"GST": 3953,
"amount": 77922
,
"billdate": "2018-08-23",
"outlet": "JAYANAGAR",
"gross": 302731,
"discount": 1124,
"GST": 17774,
"amount": 319472
,
"billdate": "2018-08-23",
"outlet": "MALLESHWARAM",
"gross": 63555,
"discount": 0,
"GST": 3565,
"amount": 67142
,
"billdate": "2018-08-23",
"outlet": "KOLAR",
"gross": 53637,
"discount": 0,
"GST": 2860,
"amount": 56506
,
"billdate": "2018-08-24",
"outlet": "JAYANAGAR",
"gross": 284354,
"discount": 774,
"GST": 16423,
"amount": 300111
,
"billdate": "2018-08-24",
"outlet": "MALLESHWARAM",
"gross": 48130,
"discount": 0,
"GST": 2857,
"amount": 50997
,
"billdate": "2018-08-24",
"outlet": "KOLAR",
"gross": 55040,
"discount": 0,
"GST": 2871,
"amount": 57926
]
let formatData = function(data)
let billdates = [];
let outlets = [];
data.forEach(element =>
if (billdates.indexOf(element.billdate) == -1)
billdates.push(element.billdate);
if (outlets.indexOf(element.outlet) == -1)
outlets.push(element.outlet);
);
return
data: data,
billdates: billdates,
outlets: outlets,
;
;
let renderTable = function(data)
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("dailySales");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "BillDate";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let grandGross = 0;
let grandDiscount = 0;
let grandGst = 0;
let outletWiseTotal = ;
let outletWiseGross = ;
let outletWiseDiscount = ;
let outletWiseGst = ;
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element =>
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
outletWiseGross[element] = 0;
outletWiseDiscount[element] = 0;
outletWiseGst[element] = 0;
data.forEach(el =>
if (el.outlet == element)
outletWiseTotal[element] += parseInt(el.amount);
outletWiseGross[element] += parseInt(el.gross);
outletWiseDiscount[element] += parseInt(el.discount);
outletWiseGst[element] += parseInt(el.GST);
);
grandTotal += outletWiseTotal[element];
grandGross += outletWiseGross[element];
grandDiscount += outletWiseDiscount[element];
grandGst += outletWiseGst[element];
);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "";
headerRow.appendChild(th);
for (i = 0; i < outlets.length + 1; i++)
th = document.createElement("th");
th.innerHTML = "Discount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "GST";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Net Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Gross Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
headerRow = document.createElement("tr");
td = document.createElement("th");
td.innerHTML = "Total";
td.classList.add("text-center");
headerRow.appendChild(td);
outlets.forEach(element =>
td = document.createElement("th");
td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
);
td = document.createElement("th");
td.innerHTML = grandTotal.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGst.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGross.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element =>
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
let totalGross = 0;
let totalDiscount = 0;
let totalGST = 0;
outlets.forEach(outlet =>
let ta = 0;
let tg = 0;
let tdi = 0;
let tgst = 0;
data.forEach(d =>
if (d.billdate == element && d.outlet == outlet)
total += parseInt(d.amount);
totalGross += parseInt(d.gross);
totalDiscount += parseInt(d.discount);
totalGST += parseInt(d.GST);
ta = d.amount;
tg = d.gross;
tdi = d.discount;
tgst = d.GST;
);
td = document.createElement("td");
td.innerHTML = tg.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tdi.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tgst.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = ta.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
);
/* console.log("row is : " , row.children ) */
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGST.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGross.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
tbody.appendChild(row);
);
table.appendChild(tbody);
tbl.innerHTML = "";
tbl.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
let formatedData = formatData(data);
renderTable(formatedData);table.table-bordered>thead>tr>th
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
/* background-color: #00998C */
table.table-bordered>tbody>tr>td
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 5px 5px 5px 5px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<h1>Testing</h1>
<div align="center" class="table table-responsive">
<table id="dailySales">
</table>
</div>as i have edited the code to make it clear what i am trying to achieve i am trying to make my tbody scroll
Any-kind of help will be appreciated
Note i am open to use any jquery,javascript resources which can fix headers
javascript jquery html css3 html-table
asked Mar 6 at 6:25
manish thakurmanish thakur
16713
take a look at this codepen.io/nirmalkc/pen/oswdB
– Gagan Deep
Mar 8 at 7:05
@GaganDeep i have already tried this one ,,this squeezes the tbody,i have search alot ongoogle,after that i have putted the post,my table is dynamic i can't give width because it can change on user basis
– manish thakur
Mar 8 at 7:09
@MunimMunna yup somthing like that but header should be fixed
– manish thakur
Mar 8 at 8:56
1
Fixed header with datatables: horizontal scroll only. horizontal+vertical scroll.
– Munim Munna
Mar 8 at 12:19
@MunimMunna hey yup you are correct,but one issue is there how can i give dynamic height,like for any device it should take screen size only
– manish thakur
Mar 8 at 12:33
|
show 5 more comments
9
9
9
0
I have A HTML table with JSON data in which dynamically i am trying to make tbody scroll vertically with fix header
- I am trying to make tbody scroll vertically so that user can see data in single page only
What i have done
var data = [
"billdate": "2018-08-01",
"outlet": "JAYANAGAR",
"gross": 274659,
"discount": 297,
"GST": 16479,
"amount": 290954
,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM",
"gross": 55185,
"discount": 0,
"GST": 3074,
"amount": 58281
,
"billdate": "2018-08-01",
"outlet": "KOLAR",
"gross": 62513,
"discount": 0,
"GST": 3306,
"amount": 65880
,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR",
"gross": 279509,
"discount": 68,
"GST": 16582,
"amount": 296125
,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM",
"gross": 53462,
"discount": 0,
"GST": 3064,
"amount": 56545
,
"billdate": "2018-08-02",
"outlet": "KOLAR",
"gross": 68651,
"discount": 0,
"GST": 3492,
"amount": 72213
,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR",
"gross": 327097,
"discount": 539,
"GST": 19945,
"amount": 346605
,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM",
"gross": 59341,
"discount": 105,
"GST": 3370,
"amount": 62459
,
"billdate": "2018-08-03",
"outlet": "KOLAR",
"gross": 61953,
"discount": 0,
"GST": 3225,
"amount": 65248
,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR",
"gross": 490465,
"discount": 839,
"GST": 28465,
"amount": 518212
,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM",
"gross": 99212,
"discount": 0,
"GST": 5567,
"amount": 104801
,
"billdate": "2018-08-04",
"outlet": "KOLAR",
"gross": 131349,
"discount": 0,
"GST": 6676,
"amount": 138151
,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR",
"gross": 594466,
"discount": 591,
"GST": 34374,
"amount": 628358
,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM",
"gross": 109134,
"discount": 0,
"GST": 6067,
"amount": 115223
,
"billdate": "2018-08-05",
"outlet": "KOLAR",
"gross": 127449,
"discount": 0,
"GST": 6511,
"amount": 134107
,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR",
"gross": 167811,
"discount": 0,
"GST": 9968,
"amount": 177866
,
"billdate": "2018-08-06",
"outlet": "KOLAR",
"gross": 62796,
"discount": 0,
"GST": 3257,
"amount": 66095
,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR",
"gross": 268298,
"discount": 268,
"GST": 15943,
"amount": 284069
,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM",
"gross": 55381,
"discount": 0,
"GST": 3383,
"amount": 58789
,
"billdate": "2018-08-07",
"outlet": "KOLAR",
"gross": 64586,
"discount": 6,
"GST": 3285,
"amount": 67886
,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR",
"gross": 295544,
"discount": 246,
"GST": 17716,
"amount": 313128
,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM",
"gross": 56453,
"discount": 0,
"GST": 3462,
"amount": 59939
,
"billdate": "2018-08-08",
"outlet": "KOLAR",
"gross": 65159,
"discount": 0,
"GST": 3381,
"amount": 68558
,
"billdate": "2018-08-09",
"outlet": "JAYANAGAR",
"gross": 303778,
"discount": 201,
"GST": 18115,
"amount": 321797
,
"billdate": "2018-08-09",
"outlet": "MALLESHWARAM",
"gross": 60795,
"discount": 0,
"GST": 3620,
"amount": 64431
,
"billdate": "2018-08-09",
"outlet": "KOLAR",
"gross": 54495,
"discount": 0,
"GST": 2841,
"amount": 57352
,
"billdate": "2018-08-10",
"outlet": "JAYANAGAR",
"gross": 305223,
"discount": 53,
"GST": 18287,
"amount": 323556
,
"billdate": "2018-08-10",
"outlet": "MALLESHWARAM",
"gross": 55584,
"discount": 36,
"GST": 3207,
"amount": 58772
,
"billdate": "2018-08-10",
"outlet": "KOLAR",
"gross": 41584,
"discount": 0,
"GST": 2128,
"amount": 43722
,
"billdate": "2018-08-11",
"outlet": "JAYANAGAR",
"gross": 439024,
"discount": 177,
"GST": 25148,
"amount": 464127
,
"billdate": "2018-08-11",
"outlet": "MALLESHWARAM",
"gross": 88009,
"discount": 0,
"GST": 5090,
"amount": 93110
,
"billdate": "2018-08-11",
"outlet": "KOLAR",
"gross": 59188,
"discount": 0,
"GST": 3156,
"amount": 62213
,
"billdate": "2018-08-12",
"outlet": "JAYANAGAR",
"gross": 593776,
"discount": 809,
"GST": 33689,
"amount": 626772
,
"billdate": "2018-08-12",
"outlet": "MALLESHWARAM",
"gross": 119723,
"discount": 45,
"GST": 7245,
"amount": 126933
,
"billdate": "2018-08-12",
"outlet": "KOLAR",
"gross": 59926,
"discount": 0,
"GST": 3170,
"amount": 63119
,
"billdate": "2018-08-13",
"outlet": "JAYANAGAR",
"gross": 157580,
"discount": 340,
"GST": 10053,
"amount": 167391
,
"billdate": "2018-08-13",
"outlet": "KOLAR",
"gross": 25730,
"discount": 0,
"GST": 1368,
"amount": 27110
,
"billdate": "2018-08-14",
"outlet": "JAYANAGAR",
"gross": 260106,
"discount": 298,
"GST": 15181,
"amount": 275115
,
"billdate": "2018-08-14",
"outlet": "MALLESHWARAM",
"gross": 55145,
"discount": 19,
"GST": 3480,
"amount": 58633
,
"billdate": "2018-08-14",
"outlet": "KOLAR",
"gross": 36664,
"discount": 0,
"GST": 1916,
"amount": 37920
,
"billdate": "2018-08-15",
"outlet": "JAYANAGAR",
"gross": 478163,
"discount": 688,
"GST": 27138,
"amount": 504753
,
"billdate": "2018-08-15",
"outlet": "MALLESHWARAM",
"gross": 98179,
"discount": 0,
"GST": 5661,
"amount": 103855
,
"billdate": "2018-08-15",
"outlet": "KOLAR",
"gross": 98536,
"discount": 0,
"GST": 4964,
"amount": 103519
,
"billdate": "2018-08-16",
"outlet": "JAYANAGAR",
"gross": 277139,
"discount": 594,
"GST": 16406,
"amount": 293049
,
"billdate": "2018-08-16",
"outlet": "MALLESHWARAM",
"gross": 52828,
"discount": 0,
"GST": 3227,
"amount": 56071
,
"billdate": "2018-08-16",
"outlet": "KOLAR",
"gross": 53312,
"discount": 0,
"GST": 2730,
"amount": 56061
,
"billdate": "2018-08-17",
"outlet": "JAYANAGAR",
"gross": 329539,
"discount": 91,
"GST": 19882,
"amount": 349456
,
"billdate": "2018-08-17",
"outlet": "MALLESHWARAM",
"gross": 62946,
"discount": 0,
"GST": 3659,
"amount": 66624
,
"billdate": "2018-08-17",
"outlet": "KOLAR",
"gross": 69126,
"discount": 0,
"GST": 3501,
"amount": 72643
,
"billdate": "2018-08-18",
"outlet": "JAYANAGAR",
"gross": 443783,
"discount": 724,
"GST": 25712,
"amount": 468771
,
"billdate": "2018-08-18",
"outlet": "MALLESHWARAM",
"gross": 95622,
"discount": 0,
"GST": 5507,
"amount": 101151
,
"billdate": "2018-08-18",
"outlet": "KOLAR",
"gross": 107235,
"discount": 0,
"GST": 5683,
"amount": 112950
,
"billdate": "2018-08-19",
"outlet": "JAYANAGAR",
"gross": 517922,
"discount": 181,
"GST": 28972,
"amount": 546845
,
"billdate": "2018-08-19",
"outlet": "MALLESHWARAM",
"gross": 96821,
"discount": 0,
"GST": 5490,
"amount": 102334
,
"billdate": "2018-08-19",
"outlet": "KOLAR",
"gross": 94158,
"discount": 0,
"GST": 4909,
"amount": 99089
,
"billdate": "2018-08-20",
"outlet": "JAYANAGAR",
"gross": 156224,
"discount": 35,
"GST": 9423,
"amount": 165700
,
"billdate": "2018-08-20",
"outlet": "KOLAR",
"gross": 45547,
"discount": 0,
"GST": 2347,
"amount": 47905
,
"billdate": "2018-08-21",
"outlet": "JAYANAGAR",
"gross": 289268,
"discount": 214,
"GST": 17613,
"amount": 306776
,
"billdate": "2018-08-21",
"outlet": "MALLESHWARAM",
"gross": 57684,
"discount": 0,
"GST": 3374,
"amount": 61080
,
"billdate": "2018-08-21",
"outlet": "KOLAR",
"gross": 57725,
"discount": 0,
"GST": 2950,
"amount": 60682
,
"billdate": "2018-08-22",
"outlet": "JAYANAGAR",
"gross": 395657,
"discount": 159,
"GST": 22808,
"amount": 418418
,
"billdate": "2018-08-22",
"outlet": "MALLESHWARAM",
"gross": 82752,
"discount": 0,
"GST": 4618,
"amount": 87390
,
"billdate": "2018-08-22",
"outlet": "KOLAR",
"gross": 74048,
"discount": 0,
"GST": 3953,
"amount": 77922
,
"billdate": "2018-08-23",
"outlet": "JAYANAGAR",
"gross": 302731,
"discount": 1124,
"GST": 17774,
"amount": 319472
,
"billdate": "2018-08-23",
"outlet": "MALLESHWARAM",
"gross": 63555,
"discount": 0,
"GST": 3565,
"amount": 67142
,
"billdate": "2018-08-23",
"outlet": "KOLAR",
"gross": 53637,
"discount": 0,
"GST": 2860,
"amount": 56506
,
"billdate": "2018-08-24",
"outlet": "JAYANAGAR",
"gross": 284354,
"discount": 774,
"GST": 16423,
"amount": 300111
,
"billdate": "2018-08-24",
"outlet": "MALLESHWARAM",
"gross": 48130,
"discount": 0,
"GST": 2857,
"amount": 50997
,
"billdate": "2018-08-24",
"outlet": "KOLAR",
"gross": 55040,
"discount": 0,
"GST": 2871,
"amount": 57926
]
let formatData = function(data)
let billdates = [];
let outlets = [];
data.forEach(element =>
if (billdates.indexOf(element.billdate) == -1)
billdates.push(element.billdate);
if (outlets.indexOf(element.outlet) == -1)
outlets.push(element.outlet);
);
return
data: data,
billdates: billdates,
outlets: outlets,
;
;
let renderTable = function(data)
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("dailySales");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "BillDate";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let grandGross = 0;
let grandDiscount = 0;
let grandGst = 0;
let outletWiseTotal = ;
let outletWiseGross = ;
let outletWiseDiscount = ;
let outletWiseGst = ;
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element =>
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
outletWiseGross[element] = 0;
outletWiseDiscount[element] = 0;
outletWiseGst[element] = 0;
data.forEach(el =>
if (el.outlet == element)
outletWiseTotal[element] += parseInt(el.amount);
outletWiseGross[element] += parseInt(el.gross);
outletWiseDiscount[element] += parseInt(el.discount);
outletWiseGst[element] += parseInt(el.GST);
);
grandTotal += outletWiseTotal[element];
grandGross += outletWiseGross[element];
grandDiscount += outletWiseDiscount[element];
grandGst += outletWiseGst[element];
);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "";
headerRow.appendChild(th);
for (i = 0; i < outlets.length + 1; i++)
th = document.createElement("th");
th.innerHTML = "Discount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "GST";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Net Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Gross Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
headerRow = document.createElement("tr");
td = document.createElement("th");
td.innerHTML = "Total";
td.classList.add("text-center");
headerRow.appendChild(td);
outlets.forEach(element =>
td = document.createElement("th");
td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
);
td = document.createElement("th");
td.innerHTML = grandTotal.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGst.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGross.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element =>
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
let totalGross = 0;
let totalDiscount = 0;
let totalGST = 0;
outlets.forEach(outlet =>
let ta = 0;
let tg = 0;
let tdi = 0;
let tgst = 0;
data.forEach(d =>
if (d.billdate == element && d.outlet == outlet)
total += parseInt(d.amount);
totalGross += parseInt(d.gross);
totalDiscount += parseInt(d.discount);
totalGST += parseInt(d.GST);
ta = d.amount;
tg = d.gross;
tdi = d.discount;
tgst = d.GST;
);
td = document.createElement("td");
td.innerHTML = tg.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tdi.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tgst.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = ta.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
);
/* console.log("row is : " , row.children ) */
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGST.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGross.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
tbody.appendChild(row);
);
table.appendChild(tbody);
tbl.innerHTML = "";
tbl.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
let formatedData = formatData(data);
renderTable(formatedData);table.table-bordered>thead>tr>th
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
/* background-color: #00998C */
table.table-bordered>tbody>tr>td
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 5px 5px 5px 5px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<h1>Testing</h1>
<div align="center" class="table table-responsive">
<table id="dailySales">
</table>
</div>as i have edited the code to make it clear what i am trying to achieve i am trying to make my tbody scroll
Any-kind of help will be appreciated
Note i am open to use any jquery,javascript resources which can fix headers
javascript jquery html css3 html-table
asked Mar 6 at 6:25
manish thakurmanish thakur
16713
I have A HTML table with JSON data in which dynamically i am trying to make tbody scroll vertically with fix header
- I am trying to make tbody scroll vertically so that user can see data in single page only
What i have done
var data = [
"billdate": "2018-08-01",
"outlet": "JAYANAGAR",
"gross": 274659,
"discount": 297,
"GST": 16479,
"amount": 290954
,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM",
"gross": 55185,
"discount": 0,
"GST": 3074,
"amount": 58281
,
"billdate": "2018-08-01",
"outlet": "KOLAR",
"gross": 62513,
"discount": 0,
"GST": 3306,
"amount": 65880
,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR",
"gross": 279509,
"discount": 68,
"GST": 16582,
"amount": 296125
,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM",
"gross": 53462,
"discount": 0,
"GST": 3064,
"amount": 56545
,
"billdate": "2018-08-02",
"outlet": "KOLAR",
"gross": 68651,
"discount": 0,
"GST": 3492,
"amount": 72213
,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR",
"gross": 327097,
"discount": 539,
"GST": 19945,
"amount": 346605
,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM",
"gross": 59341,
"discount": 105,
"GST": 3370,
"amount": 62459
,
"billdate": "2018-08-03",
"outlet": "KOLAR",
"gross": 61953,
"discount": 0,
"GST": 3225,
"amount": 65248
,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR",
"gross": 490465,
"discount": 839,
"GST": 28465,
"amount": 518212
,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM",
"gross": 99212,
"discount": 0,
"GST": 5567,
"amount": 104801
,
"billdate": "2018-08-04",
"outlet": "KOLAR",
"gross": 131349,
"discount": 0,
"GST": 6676,
"amount": 138151
,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR",
"gross": 594466,
"discount": 591,
"GST": 34374,
"amount": 628358
,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM",
"gross": 109134,
"discount": 0,
"GST": 6067,
"amount": 115223
,
"billdate": "2018-08-05",
"outlet": "KOLAR",
"gross": 127449,
"discount": 0,
"GST": 6511,
"amount": 134107
,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR",
"gross": 167811,
"discount": 0,
"GST": 9968,
"amount": 177866
,
"billdate": "2018-08-06",
"outlet": "KOLAR",
"gross": 62796,
"discount": 0,
"GST": 3257,
"amount": 66095
,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR",
"gross": 268298,
"discount": 268,
"GST": 15943,
"amount": 284069
,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM",
"gross": 55381,
"discount": 0,
"GST": 3383,
"amount": 58789
,
"billdate": "2018-08-07",
"outlet": "KOLAR",
"gross": 64586,
"discount": 6,
"GST": 3285,
"amount": 67886
,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR",
"gross": 295544,
"discount": 246,
"GST": 17716,
"amount": 313128
,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM",
"gross": 56453,
"discount": 0,
"GST": 3462,
"amount": 59939
,
"billdate": "2018-08-08",
"outlet": "KOLAR",
"gross": 65159,
"discount": 0,
"GST": 3381,
"amount": 68558
,
"billdate": "2018-08-09",
"outlet": "JAYANAGAR",
"gross": 303778,
"discount": 201,
"GST": 18115,
"amount": 321797
,
"billdate": "2018-08-09",
"outlet": "MALLESHWARAM",
"gross": 60795,
"discount": 0,
"GST": 3620,
"amount": 64431
,
"billdate": "2018-08-09",
"outlet": "KOLAR",
"gross": 54495,
"discount": 0,
"GST": 2841,
"amount": 57352
,
"billdate": "2018-08-10",
"outlet": "JAYANAGAR",
"gross": 305223,
"discount": 53,
"GST": 18287,
"amount": 323556
,
"billdate": "2018-08-10",
"outlet": "MALLESHWARAM",
"gross": 55584,
"discount": 36,
"GST": 3207,
"amount": 58772
,
"billdate": "2018-08-10",
"outlet": "KOLAR",
"gross": 41584,
"discount": 0,
"GST": 2128,
"amount": 43722
,
"billdate": "2018-08-11",
"outlet": "JAYANAGAR",
"gross": 439024,
"discount": 177,
"GST": 25148,
"amount": 464127
,
"billdate": "2018-08-11",
"outlet": "MALLESHWARAM",
"gross": 88009,
"discount": 0,
"GST": 5090,
"amount": 93110
,
"billdate": "2018-08-11",
"outlet": "KOLAR",
"gross": 59188,
"discount": 0,
"GST": 3156,
"amount": 62213
,
"billdate": "2018-08-12",
"outlet": "JAYANAGAR",
"gross": 593776,
"discount": 809,
"GST": 33689,
"amount": 626772
,
"billdate": "2018-08-12",
"outlet": "MALLESHWARAM",
"gross": 119723,
"discount": 45,
"GST": 7245,
"amount": 126933
,
"billdate": "2018-08-12",
"outlet": "KOLAR",
"gross": 59926,
"discount": 0,
"GST": 3170,
"amount": 63119
,
"billdate": "2018-08-13",
"outlet": "JAYANAGAR",
"gross": 157580,
"discount": 340,
"GST": 10053,
"amount": 167391
,
"billdate": "2018-08-13",
"outlet": "KOLAR",
"gross": 25730,
"discount": 0,
"GST": 1368,
"amount": 27110
,
"billdate": "2018-08-14",
"outlet": "JAYANAGAR",
"gross": 260106,
"discount": 298,
"GST": 15181,
"amount": 275115
,
"billdate": "2018-08-14",
"outlet": "MALLESHWARAM",
"gross": 55145,
"discount": 19,
"GST": 3480,
"amount": 58633
,
"billdate": "2018-08-14",
"outlet": "KOLAR",
"gross": 36664,
"discount": 0,
"GST": 1916,
"amount": 37920
,
"billdate": "2018-08-15",
"outlet": "JAYANAGAR",
"gross": 478163,
"discount": 688,
"GST": 27138,
"amount": 504753
,
"billdate": "2018-08-15",
"outlet": "MALLESHWARAM",
"gross": 98179,
"discount": 0,
"GST": 5661,
"amount": 103855
,
"billdate": "2018-08-15",
"outlet": "KOLAR",
"gross": 98536,
"discount": 0,
"GST": 4964,
"amount": 103519
,
"billdate": "2018-08-16",
"outlet": "JAYANAGAR",
"gross": 277139,
"discount": 594,
"GST": 16406,
"amount": 293049
,
"billdate": "2018-08-16",
"outlet": "MALLESHWARAM",
"gross": 52828,
"discount": 0,
"GST": 3227,
"amount": 56071
,
"billdate": "2018-08-16",
"outlet": "KOLAR",
"gross": 53312,
"discount": 0,
"GST": 2730,
"amount": 56061
,
"billdate": "2018-08-17",
"outlet": "JAYANAGAR",
"gross": 329539,
"discount": 91,
"GST": 19882,
"amount": 349456
,
"billdate": "2018-08-17",
"outlet": "MALLESHWARAM",
"gross": 62946,
"discount": 0,
"GST": 3659,
"amount": 66624
,
"billdate": "2018-08-17",
"outlet": "KOLAR",
"gross": 69126,
"discount": 0,
"GST": 3501,
"amount": 72643
,
"billdate": "2018-08-18",
"outlet": "JAYANAGAR",
"gross": 443783,
"discount": 724,
"GST": 25712,
"amount": 468771
,
"billdate": "2018-08-18",
"outlet": "MALLESHWARAM",
"gross": 95622,
"discount": 0,
"GST": 5507,
"amount": 101151
,
"billdate": "2018-08-18",
"outlet": "KOLAR",
"gross": 107235,
"discount": 0,
"GST": 5683,
"amount": 112950
,
"billdate": "2018-08-19",
"outlet": "JAYANAGAR",
"gross": 517922,
"discount": 181,
"GST": 28972,
"amount": 546845
,
"billdate": "2018-08-19",
"outlet": "MALLESHWARAM",
"gross": 96821,
"discount": 0,
"GST": 5490,
"amount": 102334
,
"billdate": "2018-08-19",
"outlet": "KOLAR",
"gross": 94158,
"discount": 0,
"GST": 4909,
"amount": 99089
,
"billdate": "2018-08-20",
"outlet": "JAYANAGAR",
"gross": 156224,
"discount": 35,
"GST": 9423,
"amount": 165700
,
"billdate": "2018-08-20",
"outlet": "KOLAR",
"gross": 45547,
"discount": 0,
"GST": 2347,
"amount": 47905
,
"billdate": "2018-08-21",
"outlet": "JAYANAGAR",
"gross": 289268,
"discount": 214,
"GST": 17613,
"amount": 306776
,
"billdate": "2018-08-21",
"outlet": "MALLESHWARAM",
"gross": 57684,
"discount": 0,
"GST": 3374,
"amount": 61080
,
"billdate": "2018-08-21",
"outlet": "KOLAR",
"gross": 57725,
"discount": 0,
"GST": 2950,
"amount": 60682
,
"billdate": "2018-08-22",
"outlet": "JAYANAGAR",
"gross": 395657,
"discount": 159,
"GST": 22808,
"amount": 418418
,
"billdate": "2018-08-22",
"outlet": "MALLESHWARAM",
"gross": 82752,
"discount": 0,
"GST": 4618,
"amount": 87390
,
"billdate": "2018-08-22",
"outlet": "KOLAR",
"gross": 74048,
"discount": 0,
"GST": 3953,
"amount": 77922
,
"billdate": "2018-08-23",
"outlet": "JAYANAGAR",
"gross": 302731,
"discount": 1124,
"GST": 17774,
"amount": 319472
,
"billdate": "2018-08-23",
"outlet": "MALLESHWARAM",
"gross": 63555,
"discount": 0,
"GST": 3565,
"amount": 67142
,
"billdate": "2018-08-23",
"outlet": "KOLAR",
"gross": 53637,
"discount": 0,
"GST": 2860,
"amount": 56506
,
"billdate": "2018-08-24",
"outlet": "JAYANAGAR",
"gross": 284354,
"discount": 774,
"GST": 16423,
"amount": 300111
,
"billdate": "2018-08-24",
"outlet": "MALLESHWARAM",
"gross": 48130,
"discount": 0,
"GST": 2857,
"amount": 50997
,
"billdate": "2018-08-24",
"outlet": "KOLAR",
"gross": 55040,
"discount": 0,
"GST": 2871,
"amount": 57926
]
let formatData = function(data)
let billdates = [];
let outlets = [];
data.forEach(element =>
if (billdates.indexOf(element.billdate) == -1)
billdates.push(element.billdate);
if (outlets.indexOf(element.outlet) == -1)
outlets.push(element.outlet);
);
return
data: data,
billdates: billdates,
outlets: outlets,
;
;
let renderTable = function(data)
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("dailySales");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "BillDate";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let grandGross = 0;
let grandDiscount = 0;
let grandGst = 0;
let outletWiseTotal = ;
let outletWiseGross = ;
let outletWiseDiscount = ;
let outletWiseGst = ;
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element =>
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
outletWiseGross[element] = 0;
outletWiseDiscount[element] = 0;
outletWiseGst[element] = 0;
data.forEach(el =>
if (el.outlet == element)
outletWiseTotal[element] += parseInt(el.amount);
outletWiseGross[element] += parseInt(el.gross);
outletWiseDiscount[element] += parseInt(el.discount);
outletWiseGst[element] += parseInt(el.GST);
);
grandTotal += outletWiseTotal[element];
grandGross += outletWiseGross[element];
grandDiscount += outletWiseDiscount[element];
grandGst += outletWiseGst[element];
);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "";
headerRow.appendChild(th);
for (i = 0; i < outlets.length + 1; i++)
th = document.createElement("th");
th.innerHTML = "Discount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "GST";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Net Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Gross Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
headerRow = document.createElement("tr");
td = document.createElement("th");
td.innerHTML = "Total";
td.classList.add("text-center");
headerRow.appendChild(td);
outlets.forEach(element =>
td = document.createElement("th");
td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
);
td = document.createElement("th");
td.innerHTML = grandTotal.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGst.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGross.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element =>
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
let totalGross = 0;
let totalDiscount = 0;
let totalGST = 0;
outlets.forEach(outlet =>
let ta = 0;
let tg = 0;
let tdi = 0;
let tgst = 0;
data.forEach(d =>
if (d.billdate == element && d.outlet == outlet)
total += parseInt(d.amount);
totalGross += parseInt(d.gross);
totalDiscount += parseInt(d.discount);
totalGST += parseInt(d.GST);
ta = d.amount;
tg = d.gross;
tdi = d.discount;
tgst = d.GST;
);
td = document.createElement("td");
td.innerHTML = tg.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tdi.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tgst.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = ta.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
);
/* console.log("row is : " , row.children ) */
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGST.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGross.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
tbody.appendChild(row);
);
table.appendChild(tbody);
tbl.innerHTML = "";
tbl.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
let formatedData = formatData(data);
renderTable(formatedData);table.table-bordered>thead>tr>th
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
/* background-color: #00998C */
table.table-bordered>tbody>tr>td
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 5px 5px 5px 5px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<h1>Testing</h1>
<div align="center" class="table table-responsive">
<table id="dailySales">
</table>
</div>as i have edited the code to make it clear what i am trying to achieve i am trying to make my tbody scroll
Any-kind of help will be appreciated
Note i am open to use any jquery,javascript resources which can fix headers
var data = [
"billdate": "2018-08-01",
"outlet": "JAYANAGAR",
"gross": 274659,
"discount": 297,
"GST": 16479,
"amount": 290954
,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM",
"gross": 55185,
"discount": 0,
"GST": 3074,
"amount": 58281
,
"billdate": "2018-08-01",
"outlet": "KOLAR",
"gross": 62513,
"discount": 0,
"GST": 3306,
"amount": 65880
,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR",
"gross": 279509,
"discount": 68,
"GST": 16582,
"amount": 296125
,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM",
"gross": 53462,
"discount": 0,
"GST": 3064,
"amount": 56545
,
"billdate": "2018-08-02",
"outlet": "KOLAR",
"gross": 68651,
"discount": 0,
"GST": 3492,
"amount": 72213
,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR",
"gross": 327097,
"discount": 539,
"GST": 19945,
"amount": 346605
,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM",
"gross": 59341,
"discount": 105,
"GST": 3370,
"amount": 62459
,
"billdate": "2018-08-03",
"outlet": "KOLAR",
"gross": 61953,
"discount": 0,
"GST": 3225,
"amount": 65248
,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR",
"gross": 490465,
"discount": 839,
"GST": 28465,
"amount": 518212
,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM",
"gross": 99212,
"discount": 0,
"GST": 5567,
"amount": 104801
,
"billdate": "2018-08-04",
"outlet": "KOLAR",
"gross": 131349,
"discount": 0,
"GST": 6676,
"amount": 138151
,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR",
"gross": 594466,
"discount": 591,
"GST": 34374,
"amount": 628358
,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM",
"gross": 109134,
"discount": 0,
"GST": 6067,
"amount": 115223
,
"billdate": "2018-08-05",
"outlet": "KOLAR",
"gross": 127449,
"discount": 0,
"GST": 6511,
"amount": 134107
,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR",
"gross": 167811,
"discount": 0,
"GST": 9968,
"amount": 177866
,
"billdate": "2018-08-06",
"outlet": "KOLAR",
"gross": 62796,
"discount": 0,
"GST": 3257,
"amount": 66095
,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR",
"gross": 268298,
"discount": 268,
"GST": 15943,
"amount": 284069
,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM",
"gross": 55381,
"discount": 0,
"GST": 3383,
"amount": 58789
,
"billdate": "2018-08-07",
"outlet": "KOLAR",
"gross": 64586,
"discount": 6,
"GST": 3285,
"amount": 67886
,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR",
"gross": 295544,
"discount": 246,
"GST": 17716,
"amount": 313128
,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM",
"gross": 56453,
"discount": 0,
"GST": 3462,
"amount": 59939
,
"billdate": "2018-08-08",
"outlet": "KOLAR",
"gross": 65159,
"discount": 0,
"GST": 3381,
"amount": 68558
,
"billdate": "2018-08-09",
"outlet": "JAYANAGAR",
"gross": 303778,
"discount": 201,
"GST": 18115,
"amount": 321797
,
"billdate": "2018-08-09",
"outlet": "MALLESHWARAM",
"gross": 60795,
"discount": 0,
"GST": 3620,
"amount": 64431
,
"billdate": "2018-08-09",
"outlet": "KOLAR",
"gross": 54495,
"discount": 0,
"GST": 2841,
"amount": 57352
,
"billdate": "2018-08-10",
"outlet": "JAYANAGAR",
"gross": 305223,
"discount": 53,
"GST": 18287,
"amount": 323556
,
"billdate": "2018-08-10",
"outlet": "MALLESHWARAM",
"gross": 55584,
"discount": 36,
"GST": 3207,
"amount": 58772
,
"billdate": "2018-08-10",
"outlet": "KOLAR",
"gross": 41584,
"discount": 0,
"GST": 2128,
"amount": 43722
,
"billdate": "2018-08-11",
"outlet": "JAYANAGAR",
"gross": 439024,
"discount": 177,
"GST": 25148,
"amount": 464127
,
"billdate": "2018-08-11",
"outlet": "MALLESHWARAM",
"gross": 88009,
"discount": 0,
"GST": 5090,
"amount": 93110
,
"billdate": "2018-08-11",
"outlet": "KOLAR",
"gross": 59188,
"discount": 0,
"GST": 3156,
"amount": 62213
,
"billdate": "2018-08-12",
"outlet": "JAYANAGAR",
"gross": 593776,
"discount": 809,
"GST": 33689,
"amount": 626772
,
"billdate": "2018-08-12",
"outlet": "MALLESHWARAM",
"gross": 119723,
"discount": 45,
"GST": 7245,
"amount": 126933
,
"billdate": "2018-08-12",
"outlet": "KOLAR",
"gross": 59926,
"discount": 0,
"GST": 3170,
"amount": 63119
,
"billdate": "2018-08-13",
"outlet": "JAYANAGAR",
"gross": 157580,
"discount": 340,
"GST": 10053,
"amount": 167391
,
"billdate": "2018-08-13",
"outlet": "KOLAR",
"gross": 25730,
"discount": 0,
"GST": 1368,
"amount": 27110
,
"billdate": "2018-08-14",
"outlet": "JAYANAGAR",
"gross": 260106,
"discount": 298,
"GST": 15181,
"amount": 275115
,
"billdate": "2018-08-14",
"outlet": "MALLESHWARAM",
"gross": 55145,
"discount": 19,
"GST": 3480,
"amount": 58633
,
"billdate": "2018-08-14",
"outlet": "KOLAR",
"gross": 36664,
"discount": 0,
"GST": 1916,
"amount": 37920
,
"billdate": "2018-08-15",
"outlet": "JAYANAGAR",
"gross": 478163,
"discount": 688,
"GST": 27138,
"amount": 504753
,
"billdate": "2018-08-15",
"outlet": "MALLESHWARAM",
"gross": 98179,
"discount": 0,
"GST": 5661,
"amount": 103855
,
"billdate": "2018-08-15",
"outlet": "KOLAR",
"gross": 98536,
"discount": 0,
"GST": 4964,
"amount": 103519
,
"billdate": "2018-08-16",
"outlet": "JAYANAGAR",
"gross": 277139,
"discount": 594,
"GST": 16406,
"amount": 293049
,
"billdate": "2018-08-16",
"outlet": "MALLESHWARAM",
"gross": 52828,
"discount": 0,
"GST": 3227,
"amount": 56071
,
"billdate": "2018-08-16",
"outlet": "KOLAR",
"gross": 53312,
"discount": 0,
"GST": 2730,
"amount": 56061
,
"billdate": "2018-08-17",
"outlet": "JAYANAGAR",
"gross": 329539,
"discount": 91,
"GST": 19882,
"amount": 349456
,
"billdate": "2018-08-17",
"outlet": "MALLESHWARAM",
"gross": 62946,
"discount": 0,
"GST": 3659,
"amount": 66624
,
"billdate": "2018-08-17",
"outlet": "KOLAR",
"gross": 69126,
"discount": 0,
"GST": 3501,
"amount": 72643
,
"billdate": "2018-08-18",
"outlet": "JAYANAGAR",
"gross": 443783,
"discount": 724,
"GST": 25712,
"amount": 468771
,
"billdate": "2018-08-18",
"outlet": "MALLESHWARAM",
"gross": 95622,
"discount": 0,
"GST": 5507,
"amount": 101151
,
"billdate": "2018-08-18",
"outlet": "KOLAR",
"gross": 107235,
"discount": 0,
"GST": 5683,
"amount": 112950
,
"billdate": "2018-08-19",
"outlet": "JAYANAGAR",
"gross": 517922,
"discount": 181,
"GST": 28972,
"amount": 546845
,
"billdate": "2018-08-19",
"outlet": "MALLESHWARAM",
"gross": 96821,
"discount": 0,
"GST": 5490,
"amount": 102334
,
"billdate": "2018-08-19",
"outlet": "KOLAR",
"gross": 94158,
"discount": 0,
"GST": 4909,
"amount": 99089
,
"billdate": "2018-08-20",
"outlet": "JAYANAGAR",
"gross": 156224,
"discount": 35,
"GST": 9423,
"amount": 165700
,
"billdate": "2018-08-20",
"outlet": "KOLAR",
"gross": 45547,
"discount": 0,
"GST": 2347,
"amount": 47905
,
"billdate": "2018-08-21",
"outlet": "JAYANAGAR",
"gross": 289268,
"discount": 214,
"GST": 17613,
"amount": 306776
,
"billdate": "2018-08-21",
"outlet": "MALLESHWARAM",
"gross": 57684,
"discount": 0,
"GST": 3374,
"amount": 61080
,
"billdate": "2018-08-21",
"outlet": "KOLAR",
"gross": 57725,
"discount": 0,
"GST": 2950,
"amount": 60682
,
"billdate": "2018-08-22",
"outlet": "JAYANAGAR",
"gross": 395657,
"discount": 159,
"GST": 22808,
"amount": 418418
,
"billdate": "2018-08-22",
"outlet": "MALLESHWARAM",
"gross": 82752,
"discount": 0,
"GST": 4618,
"amount": 87390
,
"billdate": "2018-08-22",
"outlet": "KOLAR",
"gross": 74048,
"discount": 0,
"GST": 3953,
"amount": 77922
,
"billdate": "2018-08-23",
"outlet": "JAYANAGAR",
"gross": 302731,
"discount": 1124,
"GST": 17774,
"amount": 319472
,
"billdate": "2018-08-23",
"outlet": "MALLESHWARAM",
"gross": 63555,
"discount": 0,
"GST": 3565,
"amount": 67142
,
"billdate": "2018-08-23",
"outlet": "KOLAR",
"gross": 53637,
"discount": 0,
"GST": 2860,
"amount": 56506
,
"billdate": "2018-08-24",
"outlet": "JAYANAGAR",
"gross": 284354,
"discount": 774,
"GST": 16423,
"amount": 300111
,
"billdate": "2018-08-24",
"outlet": "MALLESHWARAM",
"gross": 48130,
"discount": 0,
"GST": 2857,
"amount": 50997
,
"billdate": "2018-08-24",
"outlet": "KOLAR",
"gross": 55040,
"discount": 0,
"GST": 2871,
"amount": 57926
]
let formatData = function(data)
let billdates = [];
let outlets = [];
data.forEach(element =>
if (billdates.indexOf(element.billdate) == -1)
billdates.push(element.billdate);
if (outlets.indexOf(element.outlet) == -1)
outlets.push(element.outlet);
);
return
data: data,
billdates: billdates,
outlets: outlets,
;
;
let renderTable = function(data)
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("dailySales");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "BillDate";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let grandGross = 0;
let grandDiscount = 0;
let grandGst = 0;
let outletWiseTotal = ;
let outletWiseGross = ;
let outletWiseDiscount = ;
let outletWiseGst = ;
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element =>
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
outletWiseGross[element] = 0;
outletWiseDiscount[element] = 0;
outletWiseGst[element] = 0;
data.forEach(el =>
if (el.outlet == element)
outletWiseTotal[element] += parseInt(el.amount);
outletWiseGross[element] += parseInt(el.gross);
outletWiseDiscount[element] += parseInt(el.discount);
outletWiseGst[element] += parseInt(el.GST);
);
grandTotal += outletWiseTotal[element];
grandGross += outletWiseGross[element];
grandDiscount += outletWiseDiscount[element];
grandGst += outletWiseGst[element];
);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "";
headerRow.appendChild(th);
for (i = 0; i < outlets.length + 1; i++)
th = document.createElement("th");
th.innerHTML = "Discount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "GST";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Net Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Gross Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
headerRow = document.createElement("tr");
td = document.createElement("th");
td.innerHTML = "Total";
td.classList.add("text-center");
headerRow.appendChild(td);
outlets.forEach(element =>
td = document.createElement("th");
td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
);
td = document.createElement("th");
td.innerHTML = grandTotal.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGst.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGross.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element =>
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
let totalGross = 0;
let totalDiscount = 0;
let totalGST = 0;
outlets.forEach(outlet =>
let ta = 0;
let tg = 0;
let tdi = 0;
let tgst = 0;
data.forEach(d =>
if (d.billdate == element && d.outlet == outlet)
total += parseInt(d.amount);
totalGross += parseInt(d.gross);
totalDiscount += parseInt(d.discount);
totalGST += parseInt(d.GST);
ta = d.amount;
tg = d.gross;
tdi = d.discount;
tgst = d.GST;
);
td = document.createElement("td");
td.innerHTML = tg.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tdi.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tgst.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = ta.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
);
/* console.log("row is : " , row.children ) */
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGST.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGross.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
tbody.appendChild(row);
);
table.appendChild(tbody);
tbl.innerHTML = "";
tbl.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
let formatedData = formatData(data);
renderTable(formatedData);table.table-bordered>thead>tr>th
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
/* background-color: #00998C */
table.table-bordered>tbody>tr>td
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 5px 5px 5px 5px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<h1>Testing</h1>
<div align="center" class="table table-responsive">
<table id="dailySales">
</table>
</div>var data = [
"billdate": "2018-08-01",
"outlet": "JAYANAGAR",
"gross": 274659,
"discount": 297,
"GST": 16479,
"amount": 290954
,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM",
"gross": 55185,
"discount": 0,
"GST": 3074,
"amount": 58281
,
"billdate": "2018-08-01",
"outlet": "KOLAR",
"gross": 62513,
"discount": 0,
"GST": 3306,
"amount": 65880
,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR",
"gross": 279509,
"discount": 68,
"GST": 16582,
"amount": 296125
,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM",
"gross": 53462,
"discount": 0,
"GST": 3064,
"amount": 56545
,
"billdate": "2018-08-02",
"outlet": "KOLAR",
"gross": 68651,
"discount": 0,
"GST": 3492,
"amount": 72213
,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR",
"gross": 327097,
"discount": 539,
"GST": 19945,
"amount": 346605
,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM",
"gross": 59341,
"discount": 105,
"GST": 3370,
"amount": 62459
,
"billdate": "2018-08-03",
"outlet": "KOLAR",
"gross": 61953,
"discount": 0,
"GST": 3225,
"amount": 65248
,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR",
"gross": 490465,
"discount": 839,
"GST": 28465,
"amount": 518212
,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM",
"gross": 99212,
"discount": 0,
"GST": 5567,
"amount": 104801
,
"billdate": "2018-08-04",
"outlet": "KOLAR",
"gross": 131349,
"discount": 0,
"GST": 6676,
"amount": 138151
,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR",
"gross": 594466,
"discount": 591,
"GST": 34374,
"amount": 628358
,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM",
"gross": 109134,
"discount": 0,
"GST": 6067,
"amount": 115223
,
"billdate": "2018-08-05",
"outlet": "KOLAR",
"gross": 127449,
"discount": 0,
"GST": 6511,
"amount": 134107
,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR",
"gross": 167811,
"discount": 0,
"GST": 9968,
"amount": 177866
,
"billdate": "2018-08-06",
"outlet": "KOLAR",
"gross": 62796,
"discount": 0,
"GST": 3257,
"amount": 66095
,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR",
"gross": 268298,
"discount": 268,
"GST": 15943,
"amount": 284069
,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM",
"gross": 55381,
"discount": 0,
"GST": 3383,
"amount": 58789
,
"billdate": "2018-08-07",
"outlet": "KOLAR",
"gross": 64586,
"discount": 6,
"GST": 3285,
"amount": 67886
,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR",
"gross": 295544,
"discount": 246,
"GST": 17716,
"amount": 313128
,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM",
"gross": 56453,
"discount": 0,
"GST": 3462,
"amount": 59939
,
"billdate": "2018-08-08",
"outlet": "KOLAR",
"gross": 65159,
"discount": 0,
"GST": 3381,
"amount": 68558
,
"billdate": "2018-08-09",
"outlet": "JAYANAGAR",
"gross": 303778,
"discount": 201,
"GST": 18115,
"amount": 321797
,
"billdate": "2018-08-09",
"outlet": "MALLESHWARAM",
"gross": 60795,
"discount": 0,
"GST": 3620,
"amount": 64431
,
"billdate": "2018-08-09",
"outlet": "KOLAR",
"gross": 54495,
"discount": 0,
"GST": 2841,
"amount": 57352
,
"billdate": "2018-08-10",
"outlet": "JAYANAGAR",
"gross": 305223,
"discount": 53,
"GST": 18287,
"amount": 323556
,
"billdate": "2018-08-10",
"outlet": "MALLESHWARAM",
"gross": 55584,
"discount": 36,
"GST": 3207,
"amount": 58772
,
"billdate": "2018-08-10",
"outlet": "KOLAR",
"gross": 41584,
"discount": 0,
"GST": 2128,
"amount": 43722
,
"billdate": "2018-08-11",
"outlet": "JAYANAGAR",
"gross": 439024,
"discount": 177,
"GST": 25148,
"amount": 464127
,
"billdate": "2018-08-11",
"outlet": "MALLESHWARAM",
"gross": 88009,
"discount": 0,
"GST": 5090,
"amount": 93110
,
"billdate": "2018-08-11",
"outlet": "KOLAR",
"gross": 59188,
"discount": 0,
"GST": 3156,
"amount": 62213
,
"billdate": "2018-08-12",
"outlet": "JAYANAGAR",
"gross": 593776,
"discount": 809,
"GST": 33689,
"amount": 626772
,
"billdate": "2018-08-12",
"outlet": "MALLESHWARAM",
"gross": 119723,
"discount": 45,
"GST": 7245,
"amount": 126933
,
"billdate": "2018-08-12",
"outlet": "KOLAR",
"gross": 59926,
"discount": 0,
"GST": 3170,
"amount": 63119
,
"billdate": "2018-08-13",
"outlet": "JAYANAGAR",
"gross": 157580,
"discount": 340,
"GST": 10053,
"amount": 167391
,
"billdate": "2018-08-13",
"outlet": "KOLAR",
"gross": 25730,
"discount": 0,
"GST": 1368,
"amount": 27110
,
"billdate": "2018-08-14",
"outlet": "JAYANAGAR",
"gross": 260106,
"discount": 298,
"GST": 15181,
"amount": 275115
,
"billdate": "2018-08-14",
"outlet": "MALLESHWARAM",
"gross": 55145,
"discount": 19,
"GST": 3480,
"amount": 58633
,
"billdate": "2018-08-14",
"outlet": "KOLAR",
"gross": 36664,
"discount": 0,
"GST": 1916,
"amount": 37920
,
"billdate": "2018-08-15",
"outlet": "JAYANAGAR",
"gross": 478163,
"discount": 688,
"GST": 27138,
"amount": 504753
,
"billdate": "2018-08-15",
"outlet": "MALLESHWARAM",
"gross": 98179,
"discount": 0,
"GST": 5661,
"amount": 103855
,
"billdate": "2018-08-15",
"outlet": "KOLAR",
"gross": 98536,
"discount": 0,
"GST": 4964,
"amount": 103519
,
"billdate": "2018-08-16",
"outlet": "JAYANAGAR",
"gross": 277139,
"discount": 594,
"GST": 16406,
"amount": 293049
,
"billdate": "2018-08-16",
"outlet": "MALLESHWARAM",
"gross": 52828,
"discount": 0,
"GST": 3227,
"amount": 56071
,
"billdate": "2018-08-16",
"outlet": "KOLAR",
"gross": 53312,
"discount": 0,
"GST": 2730,
"amount": 56061
,
"billdate": "2018-08-17",
"outlet": "JAYANAGAR",
"gross": 329539,
"discount": 91,
"GST": 19882,
"amount": 349456
,
"billdate": "2018-08-17",
"outlet": "MALLESHWARAM",
"gross": 62946,
"discount": 0,
"GST": 3659,
"amount": 66624
,
"billdate": "2018-08-17",
"outlet": "KOLAR",
"gross": 69126,
"discount": 0,
"GST": 3501,
"amount": 72643
,
"billdate": "2018-08-18",
"outlet": "JAYANAGAR",
"gross": 443783,
"discount": 724,
"GST": 25712,
"amount": 468771
,
"billdate": "2018-08-18",
"outlet": "MALLESHWARAM",
"gross": 95622,
"discount": 0,
"GST": 5507,
"amount": 101151
,
"billdate": "2018-08-18",
"outlet": "KOLAR",
"gross": 107235,
"discount": 0,
"GST": 5683,
"amount": 112950
,
"billdate": "2018-08-19",
"outlet": "JAYANAGAR",
"gross": 517922,
"discount": 181,
"GST": 28972,
"amount": 546845
,
"billdate": "2018-08-19",
"outlet": "MALLESHWARAM",
"gross": 96821,
"discount": 0,
"GST": 5490,
"amount": 102334
,
"billdate": "2018-08-19",
"outlet": "KOLAR",
"gross": 94158,
"discount": 0,
"GST": 4909,
"amount": 99089
,
"billdate": "2018-08-20",
"outlet": "JAYANAGAR",
"gross": 156224,
"discount": 35,
"GST": 9423,
"amount": 165700
,
"billdate": "2018-08-20",
"outlet": "KOLAR",
"gross": 45547,
"discount": 0,
"GST": 2347,
"amount": 47905
,
"billdate": "2018-08-21",
"outlet": "JAYANAGAR",
"gross": 289268,
"discount": 214,
"GST": 17613,
"amount": 306776
,
"billdate": "2018-08-21",
"outlet": "MALLESHWARAM",
"gross": 57684,
"discount": 0,
"GST": 3374,
"amount": 61080
,
"billdate": "2018-08-21",
"outlet": "KOLAR",
"gross": 57725,
"discount": 0,
"GST": 2950,
"amount": 60682
,
"billdate": "2018-08-22",
"outlet": "JAYANAGAR",
"gross": 395657,
"discount": 159,
"GST": 22808,
"amount": 418418
,
"billdate": "2018-08-22",
"outlet": "MALLESHWARAM",
"gross": 82752,
"discount": 0,
"GST": 4618,
"amount": 87390
,
"billdate": "2018-08-22",
"outlet": "KOLAR",
"gross": 74048,
"discount": 0,
"GST": 3953,
"amount": 77922
,
"billdate": "2018-08-23",
"outlet": "JAYANAGAR",
"gross": 302731,
"discount": 1124,
"GST": 17774,
"amount": 319472
,
"billdate": "2018-08-23",
"outlet": "MALLESHWARAM",
"gross": 63555,
"discount": 0,
"GST": 3565,
"amount": 67142
,
"billdate": "2018-08-23",
"outlet": "KOLAR",
"gross": 53637,
"discount": 0,
"GST": 2860,
"amount": 56506
,
"billdate": "2018-08-24",
"outlet": "JAYANAGAR",
"gross": 284354,
"discount": 774,
"GST": 16423,
"amount": 300111
,
"billdate": "2018-08-24",
"outlet": "MALLESHWARAM",
"gross": 48130,
"discount": 0,
"GST": 2857,
"amount": 50997
,
"billdate": "2018-08-24",
"outlet": "KOLAR",
"gross": 55040,
"discount": 0,
"GST": 2871,
"amount": 57926
]
let formatData = function(data)
let billdates = [];
let outlets = [];
data.forEach(element =>
if (billdates.indexOf(element.billdate) == -1)
billdates.push(element.billdate);
if (outlets.indexOf(element.outlet) == -1)
outlets.push(element.outlet);
);
return
data: data,
billdates: billdates,
outlets: outlets,
;
;
let renderTable = function(data)
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("dailySales");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "BillDate";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let grandGross = 0;
let grandDiscount = 0;
let grandGst = 0;
let outletWiseTotal = ;
let outletWiseGross = ;
let outletWiseDiscount = ;
let outletWiseGst = ;
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element =>
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
outletWiseGross[element] = 0;
outletWiseDiscount[element] = 0;
outletWiseGst[element] = 0;
data.forEach(el =>
if (el.outlet == element)
outletWiseTotal[element] += parseInt(el.amount);
outletWiseGross[element] += parseInt(el.gross);
outletWiseDiscount[element] += parseInt(el.discount);
outletWiseGst[element] += parseInt(el.GST);
);
grandTotal += outletWiseTotal[element];
grandGross += outletWiseGross[element];
grandDiscount += outletWiseDiscount[element];
grandGst += outletWiseGst[element];
);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "";
headerRow.appendChild(th);
for (i = 0; i < outlets.length + 1; i++)
th = document.createElement("th");
th.innerHTML = "Discount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "GST";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Net Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Gross Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
headerRow = document.createElement("tr");
td = document.createElement("th");
td.innerHTML = "Total";
td.classList.add("text-center");
headerRow.appendChild(td);
outlets.forEach(element =>
td = document.createElement("th");
td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
);
td = document.createElement("th");
td.innerHTML = grandTotal.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGst.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGross.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element =>
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
let totalGross = 0;
let totalDiscount = 0;
let totalGST = 0;
outlets.forEach(outlet =>
let ta = 0;
let tg = 0;
let tdi = 0;
let tgst = 0;
data.forEach(d =>
if (d.billdate == element && d.outlet == outlet)
total += parseInt(d.amount);
totalGross += parseInt(d.gross);
totalDiscount += parseInt(d.discount);
totalGST += parseInt(d.GST);
ta = d.amount;
tg = d.gross;
tdi = d.discount;
tgst = d.GST;
);
td = document.createElement("td");
td.innerHTML = tg.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tdi.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tgst.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = ta.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
);
/* console.log("row is : " , row.children ) */
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGST.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGross.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
tbody.appendChild(row);
);
table.appendChild(tbody);
tbl.innerHTML = "";
tbl.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
let formatedData = formatData(data);
renderTable(formatedData);table.table-bordered>thead>tr>th
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
/* background-color: #00998C */
table.table-bordered>tbody>tr>td
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 5px 5px 5px 5px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<h1>Testing</h1>
<div align="center" class="table table-responsive">
<table id="dailySales">
</table>
</div>javascript jquery html css3 html-table
javascript jquery html css3 html-table
asked Mar 6 at 6:25
manish thakurmanish thakur
16713
asked Mar 6 at 6:25
manish thakurmanish thakur
16713
edited Mar 8 at 7:36
manish thakur
asked Mar 6 at 6:25
manish thakurmanish thakur
16713
asked Mar 6 at 6:25
manish thakurmanish thakur
16713
asked Mar 6 at 6:25
manish thakurmanish thakur
16713
16713
take a look at this codepen.io/nirmalkc/pen/oswdB
– Gagan Deep
Mar 8 at 7:05
@GaganDeep i have already tried this one ,,this squeezes the tbody,i have search alot ongoogle,after that i have putted the post,my table is dynamic i can't give width because it can change on user basis
– manish thakur
Mar 8 at 7:09
@MunimMunna yup somthing like that but header should be fixed
– manish thakur
Mar 8 at 8:56
1
Fixed header with datatables: horizontal scroll only. horizontal+vertical scroll.
– Munim Munna
Mar 8 at 12:19
@MunimMunna hey yup you are correct,but one issue is there how can i give dynamic height,like for any device it should take screen size only
– manish thakur
Mar 8 at 12:33
|
show 5 more comments
take a look at this codepen.io/nirmalkc/pen/oswdB
– Gagan Deep
Mar 8 at 7:05
@GaganDeep i have already tried this one ,,this squeezes the tbody,i have search alot ongoogle,after that i have putted the post,my table is dynamic i can't give width because it can change on user basis
– manish thakur
Mar 8 at 7:09
@MunimMunna yup somthing like that but header should be fixed
– manish thakur
Mar 8 at 8:56
1
Fixed header with datatables: horizontal scroll only. horizontal+vertical scroll.
– Munim Munna
Mar 8 at 12:19
@MunimMunna hey yup you are correct,but one issue is there how can i give dynamic height,like for any device it should take screen size only
– manish thakur
Mar 8 at 12:33
take a look at this codepen.io/nirmalkc/pen/oswdB
– Gagan Deep
Mar 8 at 7:05
take a look at this codepen.io/nirmalkc/pen/oswdB
– Gagan Deep
Mar 8 at 7:05
@GaganDeep i have already tried this one ,,this squeezes the tbody,i have search alot ongoogle,after that i have putted the post,my table is dynamic i can't give width because it can change on user basis
– manish thakur
Mar 8 at 7:09
@GaganDeep i have already tried this one ,,this squeezes the tbody,i have search alot ongoogle,after that i have putted the post,my table is dynamic i can't give width because it can change on user basis
– manish thakur
Mar 8 at 7:09
@MunimMunna yup somthing like that but header should be fixed
– manish thakur
Mar 8 at 8:56
@MunimMunna yup somthing like that but header should be fixed
– manish thakur
Mar 8 at 8:56
1
1
Fixed header with datatables: horizontal scroll only. horizontal+vertical scroll.
– Munim Munna
Mar 8 at 12:19
Fixed header with datatables: horizontal scroll only. horizontal+vertical scroll.
– Munim Munna
Mar 8 at 12:19
@MunimMunna hey yup you are correct,but one issue is there how can i give dynamic height,like for any device it should take screen size only
– manish thakur
Mar 8 at 12:33
@MunimMunna hey yup you are correct,but one issue is there how can i give dynamic height,like for any device it should take screen size only
– manish thakur
Mar 8 at 12:33
|
show 5 more comments
6 Answers
6
active
oldest
votes
8
+100
Use vh unit to set table height, that will resolve different screen size issue.
You can also use JavaScript to set table height responsive to screen more accurately.
Table with fixed header without DataTables:
var data = [
"billdate": "2018-08-01",
"outlet": "JAYANAGAR",
"gross": 274659,
"discount": 297,
"GST": 16479,
"amount": 290954
,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM",
"gross": 55185,
"discount": 0,
"GST": 3074,
"amount": 58281
,
"billdate": "2018-08-01",
"outlet": "KOLAR",
"gross": 62513,
"discount": 0,
"GST": 3306,
"amount": 65880
,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR",
"gross": 279509,
"discount": 68,
"GST": 16582,
"amount": 296125
,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM",
"gross": 53462,
"discount": 0,
"GST": 3064,
"amount": 56545
,
"billdate": "2018-08-02",
"outlet": "KOLAR",
"gross": 68651,
"discount": 0,
"GST": 3492,
"amount": 72213
,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR",
"gross": 327097,
"discount": 539,
"GST": 19945,
"amount": 346605
,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM",
"gross": 59341,
"discount": 105,
"GST": 3370,
"amount": 62459
,
"billdate": "2018-08-03",
"outlet": "KOLAR",
"gross": 61953,
"discount": 0,
"GST": 3225,
"amount": 65248
,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR",
"gross": 490465,
"discount": 839,
"GST": 28465,
"amount": 518212
,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM",
"gross": 99212,
"discount": 0,
"GST": 5567,
"amount": 104801
,
"billdate": "2018-08-04",
"outlet": "KOLAR",
"gross": 131349,
"discount": 0,
"GST": 6676,
"amount": 138151
,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR",
"gross": 594466,
"discount": 591,
"GST": 34374,
"amount": 628358
,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM",
"gross": 109134,
"discount": 0,
"GST": 6067,
"amount": 115223
,
"billdate": "2018-08-05",
"outlet": "KOLAR",
"gross": 127449,
"discount": 0,
"GST": 6511,
"amount": 134107
,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR",
"gross": 167811,
"discount": 0,
"GST": 9968,
"amount": 177866
,
"billdate": "2018-08-06",
"outlet": "KOLAR",
"gross": 62796,
"discount": 0,
"GST": 3257,
"amount": 66095
,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR",
"gross": 268298,
"discount": 268,
"GST": 15943,
"amount": 284069
,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM",
"gross": 55381,
"discount": 0,
"GST": 3383,
"amount": 58789
,
"billdate": "2018-08-07",
"outlet": "KOLAR",
"gross": 64586,
"discount": 6,
"GST": 3285,
"amount": 67886
,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR",
"gross": 295544,
"discount": 246,
"GST": 17716,
"amount": 313128
,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM",
"gross": 56453,
"discount": 0,
"GST": 3462,
"amount": 59939
,
"billdate": "2018-08-08",
"outlet": "KOLAR",
"gross": 65159,
"discount": 0,
"GST": 3381,
"amount": 68558
,
"billdate": "2018-08-09",
"outlet": "JAYANAGAR",
"gross": 303778,
"discount": 201,
"GST": 18115,
"amount": 321797
,
"billdate": "2018-08-09",
"outlet": "MALLESHWARAM",
"gross": 60795,
"discount": 0,
"GST": 3620,
"amount": 64431
,
"billdate": "2018-08-09",
"outlet": "KOLAR",
"gross": 54495,
"discount": 0,
"GST": 2841,
"amount": 57352
,
"billdate": "2018-08-10",
"outlet": "JAYANAGAR",
"gross": 305223,
"discount": 53,
"GST": 18287,
"amount": 323556
,
"billdate": "2018-08-10",
"outlet": "MALLESHWARAM",
"gross": 55584,
"discount": 36,
"GST": 3207,
"amount": 58772
,
"billdate": "2018-08-10",
"outlet": "KOLAR",
"gross": 41584,
"discount": 0,
"GST": 2128,
"amount": 43722
,
"billdate": "2018-08-11",
"outlet": "JAYANAGAR",
"gross": 439024,
"discount": 177,
"GST": 25148,
"amount": 464127
,
"billdate": "2018-08-11",
"outlet": "MALLESHWARAM",
"gross": 88009,
"discount": 0,
"GST": 5090,
"amount": 93110
,
"billdate": "2018-08-11",
"outlet": "KOLAR",
"gross": 59188,
"discount": 0,
"GST": 3156,
"amount": 62213
,
"billdate": "2018-08-12",
"outlet": "JAYANAGAR",
"gross": 593776,
"discount": 809,
"GST": 33689,
"amount": 626772
,
"billdate": "2018-08-12",
"outlet": "MALLESHWARAM",
"gross": 119723,
"discount": 45,
"GST": 7245,
"amount": 126933
,
"billdate": "2018-08-12",
"outlet": "KOLAR",
"gross": 59926,
"discount": 0,
"GST": 3170,
"amount": 63119
,
"billdate": "2018-08-13",
"outlet": "JAYANAGAR",
"gross": 157580,
"discount": 340,
"GST": 10053,
"amount": 167391
,
"billdate": "2018-08-13",
"outlet": "KOLAR",
"gross": 25730,
"discount": 0,
"GST": 1368,
"amount": 27110
,
"billdate": "2018-08-14",
"outlet": "JAYANAGAR",
"gross": 260106,
"discount": 298,
"GST": 15181,
"amount": 275115
,
"billdate": "2018-08-14",
"outlet": "MALLESHWARAM",
"gross": 55145,
"discount": 19,
"GST": 3480,
"amount": 58633
,
"billdate": "2018-08-14",
"outlet": "KOLAR",
"gross": 36664,
"discount": 0,
"GST": 1916,
"amount": 37920
,
"billdate": "2018-08-15",
"outlet": "JAYANAGAR",
"gross": 478163,
"discount": 688,
"GST": 27138,
"amount": 504753
,
"billdate": "2018-08-15",
"outlet": "MALLESHWARAM",
"gross": 98179,
"discount": 0,
"GST": 5661,
"amount": 103855
,
"billdate": "2018-08-15",
"outlet": "KOLAR",
"gross": 98536,
"discount": 0,
"GST": 4964,
"amount": 103519
,
"billdate": "2018-08-16",
"outlet": "JAYANAGAR",
"gross": 277139,
"discount": 594,
"GST": 16406,
"amount": 293049
,
"billdate": "2018-08-16",
"outlet": "MALLESHWARAM",
"gross": 52828,
"discount": 0,
"GST": 3227,
"amount": 56071
,
"billdate": "2018-08-16",
"outlet": "KOLAR",
"gross": 53312,
"discount": 0,
"GST": 2730,
"amount": 56061
,
"billdate": "2018-08-17",
"outlet": "JAYANAGAR",
"gross": 329539,
"discount": 91,
"GST": 19882,
"amount": 349456
,
"billdate": "2018-08-17",
"outlet": "MALLESHWARAM",
"gross": 62946,
"discount": 0,
"GST": 3659,
"amount": 66624
,
"billdate": "2018-08-17",
"outlet": "KOLAR",
"gross": 69126,
"discount": 0,
"GST": 3501,
"amount": 72643
,
"billdate": "2018-08-18",
"outlet": "JAYANAGAR",
"gross": 443783,
"discount": 724,
"GST": 25712,
"amount": 468771
,
"billdate": "2018-08-18",
"outlet": "MALLESHWARAM",
"gross": 95622,
"discount": 0,
"GST": 5507,
"amount": 101151
,
"billdate": "2018-08-18",
"outlet": "KOLAR",
"gross": 107235,
"discount": 0,
"GST": 5683,
"amount": 112950
,
"billdate": "2018-08-19",
"outlet": "JAYANAGAR",
"gross": 517922,
"discount": 181,
"GST": 28972,
"amount": 546845
,
"billdate": "2018-08-19",
"outlet": "MALLESHWARAM",
"gross": 96821,
"discount": 0,
"GST": 5490,
"amount": 102334
,
"billdate": "2018-08-19",
"outlet": "KOLAR",
"gross": 94158,
"discount": 0,
"GST": 4909,
"amount": 99089
,
"billdate": "2018-08-20",
"outlet": "JAYANAGAR",
"gross": 156224,
"discount": 35,
"GST": 9423,
"amount": 165700
,
"billdate": "2018-08-20",
"outlet": "KOLAR",
"gross": 45547,
"discount": 0,
"GST": 2347,
"amount": 47905
,
"billdate": "2018-08-21",
"outlet": "JAYANAGAR",
"gross": 289268,
"discount": 214,
"GST": 17613,
"amount": 306776
,
"billdate": "2018-08-21",
"outlet": "MALLESHWARAM",
"gross": 57684,
"discount": 0,
"GST": 3374,
"amount": 61080
,
"billdate": "2018-08-21",
"outlet": "KOLAR",
"gross": 57725,
"discount": 0,
"GST": 2950,
"amount": 60682
,
"billdate": "2018-08-22",
"outlet": "JAYANAGAR",
"gross": 395657,
"discount": 159,
"GST": 22808,
"amount": 418418
,
"billdate": "2018-08-22",
"outlet": "MALLESHWARAM",
"gross": 82752,
"discount": 0,
"GST": 4618,
"amount": 87390
,
"billdate": "2018-08-22",
"outlet": "KOLAR",
"gross": 74048,
"discount": 0,
"GST": 3953,
"amount": 77922
,
"billdate": "2018-08-23",
"outlet": "JAYANAGAR",
"gross": 302731,
"discount": 1124,
"GST": 17774,
"amount": 319472
,
"billdate": "2018-08-23",
"outlet": "MALLESHWARAM",
"gross": 63555,
"discount": 0,
"GST": 3565,
"amount": 67142
,
"billdate": "2018-08-23",
"outlet": "KOLAR",
"gross": 53637,
"discount": 0,
"GST": 2860,
"amount": 56506
,
"billdate": "2018-08-24",
"outlet": "JAYANAGAR",
"gross": 284354,
"discount": 774,
"GST": 16423,
"amount": 300111
,
"billdate": "2018-08-24",
"outlet": "MALLESHWARAM",
"gross": 48130,
"discount": 0,
"GST": 2857,
"amount": 50997
,
"billdate": "2018-08-24",
"outlet": "KOLAR",
"gross": 55040,
"discount": 0,
"GST": 2871,
"amount": 57926
]
let formatData = function(data)
let billdates = [];
let outlets = [];
data.forEach(element =>
if (billdates.indexOf(element.billdate) == -1)
billdates.push(element.billdate);
if (outlets.indexOf(element.outlet) == -1)
outlets.push(element.outlet);
);
return
data: data,
billdates: billdates,
outlets: outlets,
;
;
let renderTable = function(data)
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("dailySales");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "BillDate";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let grandGross = 0;
let grandDiscount = 0;
let grandGst = 0;
let outletWiseTotal = ;
let outletWiseGross = ;
let outletWiseDiscount = ;
let outletWiseGst = ;
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element =>
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
outletWiseGross[element] = 0;
outletWiseDiscount[element] = 0;
outletWiseGst[element] = 0;
data.forEach(el =>
if (el.outlet == element)
outletWiseTotal[element] += parseInt(el.amount);
outletWiseGross[element] += parseInt(el.gross);
outletWiseDiscount[element] += parseInt(el.discount);
outletWiseGst[element] += parseInt(el.GST);
);
grandTotal += outletWiseTotal[element];
grandGross += outletWiseGross[element];
grandDiscount += outletWiseDiscount[element];
grandGst += outletWiseGst[element];
);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "";
headerRow.appendChild(th);
for (i = 0; i < outlets.length + 1; i++)
th = document.createElement("th");
th.innerHTML = "Discount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "GST";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Net Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Gross Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
headerRow = document.createElement("tr");
td = document.createElement("th");
td.innerHTML = "Total";
td.classList.add("text-center");
headerRow.appendChild(td);
outlets.forEach(element =>
td = document.createElement("th");
td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
);
td = document.createElement("th");
td.innerHTML = grandTotal.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGst.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGross.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element =>
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
let totalGross = 0;
let totalDiscount = 0;
let totalGST = 0;
outlets.forEach(outlet =>
let ta = 0;
let tg = 0;
let tdi = 0;
let tgst = 0;
data.forEach(d =>
if (d.billdate == element && d.outlet == outlet)
total += parseInt(d.amount);
totalGross += parseInt(d.gross);
totalDiscount += parseInt(d.discount);
totalGST += parseInt(d.GST);
ta = d.amount;
tg = d.gross;
tdi = d.discount;
tgst = d.GST;
);
td = document.createElement("td");
td.innerHTML = tg.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tdi.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tgst.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = ta.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
);
/* console.log("row is : " , row.children ) */
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGST.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGross.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
tbody.appendChild(row);
);
table.appendChild(tbody);
document.body.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
wrapTable($(table));
let formatedData = formatData(data);
renderTable(formatedData);
function wrapTable($table)
let $tableWrapper = $('<div>').addClass('table-wrapper').insertAfter($table);
let $tableBodyWrapper = $('<div>').addClass('table-body-wrapper').appendTo($tableWrapper);
let $tableWidthTracker = $('<div>').css('width', '100%').appendTo($tableBodyWrapper);
$table.appendTo($tableBodyWrapper);
let $tableHeadWrapper = $('<div>').addClass('table-head-wrapper').width($tableWidthTracker.width()).appendTo($tableWrapper);
let $tableDuplicateHead = $table.clone().find("tbody").remove().end().appendTo($tableHeadWrapper);
let $dupCols = $tableDuplicateHead.find('thead tr:last').children();
$table.find('thead tr:last').children().each(function(i)
$dupCols.eq(i).css('minWidth', $(this).outerWidth());
);
$tableBodyWrapper.on('scroll', function()
$tableHeadWrapper.scrollLeft($tableBodyWrapper.scrollLeft());
);
$(window).on('resize', function()
$tableHeadWrapper.width($tableWidthTracker.width());
);
table.table-bordered>thead>tr>th
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
table.table-bordered>tbody>tr>td
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 5px 5px 5px 5px;
.table-wrapper
position: relative;
margin: 10px;
.table-head-wrapper
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
.table-body-wrapper
height: 70vh;
overflow: auto;
.table-body-wrapper>.table
margin: 0;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<h1>Fixed Header</h1>answered Mar 8 at 21:03
Munim MunnaMunim Munna
10.3k41543
add a comment |
2
var tableValue = [
"billdate": "2018-08-04",
"SalesType": "Total",
"JAYANAGAR": 518212,
"MALLESHWARAM": 104801,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 508161,
"MALLESHWARAM": 102675,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 10051,
"MALLESHWARAM": 2126,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "2018-08-05",
"SalesType": "Total",
"JAYANAGAR": 628358,
"MALLESHWARAM": 115223,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 608336,
"MALLESHWARAM": 109013,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 20022,
"MALLESHWARAM": 6210,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
]
function addTable(tableValue)
var col = Object.keys(tableValue[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++)
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
for (var i = 0; i < tableValue.length; i++) //table body i.e tbody
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++)
var tabCell = tr.insertCell(-1);
var tabledata = tableValue[i][col[j]];
if (tabledata && !isNaN(tabledata))
tabledata = parseInt(tabledata).toLocaleString('en-in')
if (tableValue[i]['billdate'] != "")
tr.style.backgroundColor = "yellow";
if (tableValue[i]['billdate'] === tableValue[i][col[j]])
tabCell.classList.add("headerColor");
tabCell.innerHTML = tabledata;
if (j > 1)
tabCell.classList.add("text-right");
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A
// CONTAINER.
var divContainer = document.getElementById("salesBreakupTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
addTable(tableValue)<style>
.headerColor
color:red;
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
<table id="salesBreakupTable">
</table>
</div>use just add one condition
if (tableValue[i]['billdate'] != "")
tr.style.backgroundColor = "yellow";
answered Mar 6 at 7:03
Anandhukrishna VRAnandhukrishna VR
4912
hey sir how can i make tbody vertically scroll please help in this also
– manish thakur
Mar 6 at 7:07
this is the table i want to make scroll tbody [jsfiddle.net/d7v5t0sz/]
– manish thakur
Mar 6 at 8:55
jsfiddile page is not available
– Anandhukrishna VR
Mar 6 at 9:30
i am sorry , please check this jsfiddle.net/draj8126/po0fxkse/2
– manish thakur
Mar 6 at 9:49
thead, tbody display: block; tbody height: 100px; /* Just for the demo / overflow-y: auto; / Trigger vertical scroll / overflow-x: auto; / Hide the horizontal scroll */ add this style to your page
– Anandhukrishna VR
Mar 6 at 10:17
|
show 1 more comment
2
You can try the following code or you can use DataTable js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<style>
.headerColor
color:red;
#salesBreakupTable thead, #salesBreakupTable tbody
display: block;
#salesBreakupTable tbody
height: 300px;
overflow: auto;
#salesBreakupTable tr
position: relative;
width: 100%;
display: flex;
#salesBreakupTable tr td, #salesBreakupTable tr th
flex: 1;
width: 200px;
flex-shrink: 0;
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table id="salesBreakupTable">
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var tableValue = [
"billdate": "2018-08-04",
"SalesType": "Total",
"JAYANAGAR": 518212,
"MALLESHWARAM": 104801,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 508161,
"MALLESHWARAM": 102675,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 10051,
"MALLESHWARAM": 2126,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "2018-08-05",
"SalesType": "Total",
"JAYANAGAR": 628358,
"MALLESHWARAM": 115223,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 608336,
"MALLESHWARAM": 109013,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 20022,
"MALLESHWARAM": 6210,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
];
function addTable(data)
var tableHeader = "<thead><tr>";
var tableBody = "<tbody>";
$.each(data,function(i,v)
if (v['billdate'])
tableBody += "<tr class='headerColor'>";
else
tableBody += "<tr>";
$.each(v,function(d,a)
if (i == 0)
tableHeader += "<th>"+d+"</th>";
tableBody += "<td>"+a+"</td>";
);
tableBody += "</tr>";
);
tableHeader += "</tr></thead>";
tableBody += "</tbody>";
$("#salesBreakupTable").addClass("table table-striped table-bordered table-hover").html(tableHeader+tableBody);
addTable(tableValue);
</script>
</body>
</html>
answered Mar 6 at 8:18
Mahmoud SalemMahmoud Salem
814
hey actually my table design is different so i can't use datatable
– manish thakur
Mar 6 at 8:23
Did you try the above code using Jquery Only?
– Mahmoud Salem
Mar 6 at 8:28
please try this link this is the table i am trying to scroll vertically [jsfiddle.net/d7v5t0sz/]
– manish thakur
Mar 6 at 8:32
try the updated code
– Mahmoud Salem
Mar 6 at 9:01
add a comment |
2
The idea is to put the table in a div, while setting overflow hidden on the div and overflow auto for the table body. This can be done with pure css and html. Check out this fix.
answered Mar 13 at 9:34
BogdanBogdan
7917
add a comment |
0
Try to replace this if block :
if (tableValue[i]['billdate'] === tableValue[i][col[j]])
tabCell.classList.add("headerColor"); // here i am checking if tableValue===billdate then giving it a class to do some css to it
With :
if ((tableValue[i]['billdate'] === tableValue[i][col[j]]) && (tableValue[i][col[j]]).length != 0 ) // added empty cell filter so empty cells will not get the headerColor class
tabCell.classList.add("headerColor"); // here i am checking if tableValue===billdate then giving it a class to do some css to it
And then apply this style :
.headerColor,.headerColor ~ td
background-color:red;
color: white;
table#salesBreakupTable thead, table#salesBreakupTable tbody display: block;
table#salesBreakupTable tbody
height: 280px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
answered Mar 6 at 7:34
support.x1support.x1
513
hey can i fit heightdynamically so that if it increases with screen size it should scroll automatically and also full table is scrolling not tbody
– manish thakur
Mar 6 at 7:43
@manishthakur Yes you can, try for exampleheight: 100vh;to get a full vertical size table
– support.x1
Mar 6 at 7:46
hight:100vh; is working but when there is less data which is less then screen length it showsup lines by default
– manish thakur
Mar 6 at 7:50
just change tomax-height:100vh;then ;)
– support.x1
Mar 6 at 7:59
hey you there ?
– manish thakur
Mar 6 at 8:13
|
show 4 more comments
0
Use DataTable js instead of this, So DataTable js give more table functionalities
Here DataTable colour adding example
$('#example').dataTable(
"createdRow": function( row, data, dataIndex)
if(data[2] == `someVal`)
$(row).addClass('redClass');
);
sample url : click here
DataTable refernce click here
edited Mar 8 at 8:42
cbaconnier
1,3291925
answered Mar 6 at 6:43
Anandhukrishna VRAnandhukrishna VR
4912
1
i am not allowd to use that,thats why trying to do with css only..if you can help me here then it will be helpful for me please
– manish thakur
Mar 6 at 6:44
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
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%2f55016859%2fhow-to-make-tbody-of-html-table-scroll-vertically%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
6 Answers
6
active
oldest
votes
6 Answers
6
active
oldest
votes
active
oldest
votes
active
oldest
votes
8
+100
Use vh unit to set table height, that will resolve different screen size issue.
You can also use JavaScript to set table height responsive to screen more accurately.
Table with fixed header without DataTables:
var data = [
"billdate": "2018-08-01",
"outlet": "JAYANAGAR",
"gross": 274659,
"discount": 297,
"GST": 16479,
"amount": 290954
,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM",
"gross": 55185,
"discount": 0,
"GST": 3074,
"amount": 58281
,
"billdate": "2018-08-01",
"outlet": "KOLAR",
"gross": 62513,
"discount": 0,
"GST": 3306,
"amount": 65880
,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR",
"gross": 279509,
"discount": 68,
"GST": 16582,
"amount": 296125
,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM",
"gross": 53462,
"discount": 0,
"GST": 3064,
"amount": 56545
,
"billdate": "2018-08-02",
"outlet": "KOLAR",
"gross": 68651,
"discount": 0,
"GST": 3492,
"amount": 72213
,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR",
"gross": 327097,
"discount": 539,
"GST": 19945,
"amount": 346605
,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM",
"gross": 59341,
"discount": 105,
"GST": 3370,
"amount": 62459
,
"billdate": "2018-08-03",
"outlet": "KOLAR",
"gross": 61953,
"discount": 0,
"GST": 3225,
"amount": 65248
,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR",
"gross": 490465,
"discount": 839,
"GST": 28465,
"amount": 518212
,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM",
"gross": 99212,
"discount": 0,
"GST": 5567,
"amount": 104801
,
"billdate": "2018-08-04",
"outlet": "KOLAR",
"gross": 131349,
"discount": 0,
"GST": 6676,
"amount": 138151
,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR",
"gross": 594466,
"discount": 591,
"GST": 34374,
"amount": 628358
,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM",
"gross": 109134,
"discount": 0,
"GST": 6067,
"amount": 115223
,
"billdate": "2018-08-05",
"outlet": "KOLAR",
"gross": 127449,
"discount": 0,
"GST": 6511,
"amount": 134107
,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR",
"gross": 167811,
"discount": 0,
"GST": 9968,
"amount": 177866
,
"billdate": "2018-08-06",
"outlet": "KOLAR",
"gross": 62796,
"discount": 0,
"GST": 3257,
"amount": 66095
,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR",
"gross": 268298,
"discount": 268,
"GST": 15943,
"amount": 284069
,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM",
"gross": 55381,
"discount": 0,
"GST": 3383,
"amount": 58789
,
"billdate": "2018-08-07",
"outlet": "KOLAR",
"gross": 64586,
"discount": 6,
"GST": 3285,
"amount": 67886
,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR",
"gross": 295544,
"discount": 246,
"GST": 17716,
"amount": 313128
,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM",
"gross": 56453,
"discount": 0,
"GST": 3462,
"amount": 59939
,
"billdate": "2018-08-08",
"outlet": "KOLAR",
"gross": 65159,
"discount": 0,
"GST": 3381,
"amount": 68558
,
"billdate": "2018-08-09",
"outlet": "JAYANAGAR",
"gross": 303778,
"discount": 201,
"GST": 18115,
"amount": 321797
,
"billdate": "2018-08-09",
"outlet": "MALLESHWARAM",
"gross": 60795,
"discount": 0,
"GST": 3620,
"amount": 64431
,
"billdate": "2018-08-09",
"outlet": "KOLAR",
"gross": 54495,
"discount": 0,
"GST": 2841,
"amount": 57352
,
"billdate": "2018-08-10",
"outlet": "JAYANAGAR",
"gross": 305223,
"discount": 53,
"GST": 18287,
"amount": 323556
,
"billdate": "2018-08-10",
"outlet": "MALLESHWARAM",
"gross": 55584,
"discount": 36,
"GST": 3207,
"amount": 58772
,
"billdate": "2018-08-10",
"outlet": "KOLAR",
"gross": 41584,
"discount": 0,
"GST": 2128,
"amount": 43722
,
"billdate": "2018-08-11",
"outlet": "JAYANAGAR",
"gross": 439024,
"discount": 177,
"GST": 25148,
"amount": 464127
,
"billdate": "2018-08-11",
"outlet": "MALLESHWARAM",
"gross": 88009,
"discount": 0,
"GST": 5090,
"amount": 93110
,
"billdate": "2018-08-11",
"outlet": "KOLAR",
"gross": 59188,
"discount": 0,
"GST": 3156,
"amount": 62213
,
"billdate": "2018-08-12",
"outlet": "JAYANAGAR",
"gross": 593776,
"discount": 809,
"GST": 33689,
"amount": 626772
,
"billdate": "2018-08-12",
"outlet": "MALLESHWARAM",
"gross": 119723,
"discount": 45,
"GST": 7245,
"amount": 126933
,
"billdate": "2018-08-12",
"outlet": "KOLAR",
"gross": 59926,
"discount": 0,
"GST": 3170,
"amount": 63119
,
"billdate": "2018-08-13",
"outlet": "JAYANAGAR",
"gross": 157580,
"discount": 340,
"GST": 10053,
"amount": 167391
,
"billdate": "2018-08-13",
"outlet": "KOLAR",
"gross": 25730,
"discount": 0,
"GST": 1368,
"amount": 27110
,
"billdate": "2018-08-14",
"outlet": "JAYANAGAR",
"gross": 260106,
"discount": 298,
"GST": 15181,
"amount": 275115
,
"billdate": "2018-08-14",
"outlet": "MALLESHWARAM",
"gross": 55145,
"discount": 19,
"GST": 3480,
"amount": 58633
,
"billdate": "2018-08-14",
"outlet": "KOLAR",
"gross": 36664,
"discount": 0,
"GST": 1916,
"amount": 37920
,
"billdate": "2018-08-15",
"outlet": "JAYANAGAR",
"gross": 478163,
"discount": 688,
"GST": 27138,
"amount": 504753
,
"billdate": "2018-08-15",
"outlet": "MALLESHWARAM",
"gross": 98179,
"discount": 0,
"GST": 5661,
"amount": 103855
,
"billdate": "2018-08-15",
"outlet": "KOLAR",
"gross": 98536,
"discount": 0,
"GST": 4964,
"amount": 103519
,
"billdate": "2018-08-16",
"outlet": "JAYANAGAR",
"gross": 277139,
"discount": 594,
"GST": 16406,
"amount": 293049
,
"billdate": "2018-08-16",
"outlet": "MALLESHWARAM",
"gross": 52828,
"discount": 0,
"GST": 3227,
"amount": 56071
,
"billdate": "2018-08-16",
"outlet": "KOLAR",
"gross": 53312,
"discount": 0,
"GST": 2730,
"amount": 56061
,
"billdate": "2018-08-17",
"outlet": "JAYANAGAR",
"gross": 329539,
"discount": 91,
"GST": 19882,
"amount": 349456
,
"billdate": "2018-08-17",
"outlet": "MALLESHWARAM",
"gross": 62946,
"discount": 0,
"GST": 3659,
"amount": 66624
,
"billdate": "2018-08-17",
"outlet": "KOLAR",
"gross": 69126,
"discount": 0,
"GST": 3501,
"amount": 72643
,
"billdate": "2018-08-18",
"outlet": "JAYANAGAR",
"gross": 443783,
"discount": 724,
"GST": 25712,
"amount": 468771
,
"billdate": "2018-08-18",
"outlet": "MALLESHWARAM",
"gross": 95622,
"discount": 0,
"GST": 5507,
"amount": 101151
,
"billdate": "2018-08-18",
"outlet": "KOLAR",
"gross": 107235,
"discount": 0,
"GST": 5683,
"amount": 112950
,
"billdate": "2018-08-19",
"outlet": "JAYANAGAR",
"gross": 517922,
"discount": 181,
"GST": 28972,
"amount": 546845
,
"billdate": "2018-08-19",
"outlet": "MALLESHWARAM",
"gross": 96821,
"discount": 0,
"GST": 5490,
"amount": 102334
,
"billdate": "2018-08-19",
"outlet": "KOLAR",
"gross": 94158,
"discount": 0,
"GST": 4909,
"amount": 99089
,
"billdate": "2018-08-20",
"outlet": "JAYANAGAR",
"gross": 156224,
"discount": 35,
"GST": 9423,
"amount": 165700
,
"billdate": "2018-08-20",
"outlet": "KOLAR",
"gross": 45547,
"discount": 0,
"GST": 2347,
"amount": 47905
,
"billdate": "2018-08-21",
"outlet": "JAYANAGAR",
"gross": 289268,
"discount": 214,
"GST": 17613,
"amount": 306776
,
"billdate": "2018-08-21",
"outlet": "MALLESHWARAM",
"gross": 57684,
"discount": 0,
"GST": 3374,
"amount": 61080
,
"billdate": "2018-08-21",
"outlet": "KOLAR",
"gross": 57725,
"discount": 0,
"GST": 2950,
"amount": 60682
,
"billdate": "2018-08-22",
"outlet": "JAYANAGAR",
"gross": 395657,
"discount": 159,
"GST": 22808,
"amount": 418418
,
"billdate": "2018-08-22",
"outlet": "MALLESHWARAM",
"gross": 82752,
"discount": 0,
"GST": 4618,
"amount": 87390
,
"billdate": "2018-08-22",
"outlet": "KOLAR",
"gross": 74048,
"discount": 0,
"GST": 3953,
"amount": 77922
,
"billdate": "2018-08-23",
"outlet": "JAYANAGAR",
"gross": 302731,
"discount": 1124,
"GST": 17774,
"amount": 319472
,
"billdate": "2018-08-23",
"outlet": "MALLESHWARAM",
"gross": 63555,
"discount": 0,
"GST": 3565,
"amount": 67142
,
"billdate": "2018-08-23",
"outlet": "KOLAR",
"gross": 53637,
"discount": 0,
"GST": 2860,
"amount": 56506
,
"billdate": "2018-08-24",
"outlet": "JAYANAGAR",
"gross": 284354,
"discount": 774,
"GST": 16423,
"amount": 300111
,
"billdate": "2018-08-24",
"outlet": "MALLESHWARAM",
"gross": 48130,
"discount": 0,
"GST": 2857,
"amount": 50997
,
"billdate": "2018-08-24",
"outlet": "KOLAR",
"gross": 55040,
"discount": 0,
"GST": 2871,
"amount": 57926
]
let formatData = function(data)
let billdates = [];
let outlets = [];
data.forEach(element =>
if (billdates.indexOf(element.billdate) == -1)
billdates.push(element.billdate);
if (outlets.indexOf(element.outlet) == -1)
outlets.push(element.outlet);
);
return
data: data,
billdates: billdates,
outlets: outlets,
;
;
let renderTable = function(data)
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("dailySales");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "BillDate";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let grandGross = 0;
let grandDiscount = 0;
let grandGst = 0;
let outletWiseTotal = ;
let outletWiseGross = ;
let outletWiseDiscount = ;
let outletWiseGst = ;
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element =>
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
outletWiseGross[element] = 0;
outletWiseDiscount[element] = 0;
outletWiseGst[element] = 0;
data.forEach(el =>
if (el.outlet == element)
outletWiseTotal[element] += parseInt(el.amount);
outletWiseGross[element] += parseInt(el.gross);
outletWiseDiscount[element] += parseInt(el.discount);
outletWiseGst[element] += parseInt(el.GST);
);
grandTotal += outletWiseTotal[element];
grandGross += outletWiseGross[element];
grandDiscount += outletWiseDiscount[element];
grandGst += outletWiseGst[element];
);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "";
headerRow.appendChild(th);
for (i = 0; i < outlets.length + 1; i++)
th = document.createElement("th");
th.innerHTML = "Discount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "GST";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Net Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Gross Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
headerRow = document.createElement("tr");
td = document.createElement("th");
td.innerHTML = "Total";
td.classList.add("text-center");
headerRow.appendChild(td);
outlets.forEach(element =>
td = document.createElement("th");
td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
);
td = document.createElement("th");
td.innerHTML = grandTotal.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGst.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGross.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element =>
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
let totalGross = 0;
let totalDiscount = 0;
let totalGST = 0;
outlets.forEach(outlet =>
let ta = 0;
let tg = 0;
let tdi = 0;
let tgst = 0;
data.forEach(d =>
if (d.billdate == element && d.outlet == outlet)
total += parseInt(d.amount);
totalGross += parseInt(d.gross);
totalDiscount += parseInt(d.discount);
totalGST += parseInt(d.GST);
ta = d.amount;
tg = d.gross;
tdi = d.discount;
tgst = d.GST;
);
td = document.createElement("td");
td.innerHTML = tg.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tdi.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tgst.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = ta.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
);
/* console.log("row is : " , row.children ) */
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGST.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGross.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
tbody.appendChild(row);
);
table.appendChild(tbody);
document.body.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
wrapTable($(table));
let formatedData = formatData(data);
renderTable(formatedData);
function wrapTable($table)
let $tableWrapper = $('<div>').addClass('table-wrapper').insertAfter($table);
let $tableBodyWrapper = $('<div>').addClass('table-body-wrapper').appendTo($tableWrapper);
let $tableWidthTracker = $('<div>').css('width', '100%').appendTo($tableBodyWrapper);
$table.appendTo($tableBodyWrapper);
let $tableHeadWrapper = $('<div>').addClass('table-head-wrapper').width($tableWidthTracker.width()).appendTo($tableWrapper);
let $tableDuplicateHead = $table.clone().find("tbody").remove().end().appendTo($tableHeadWrapper);
let $dupCols = $tableDuplicateHead.find('thead tr:last').children();
$table.find('thead tr:last').children().each(function(i)
$dupCols.eq(i).css('minWidth', $(this).outerWidth());
);
$tableBodyWrapper.on('scroll', function()
$tableHeadWrapper.scrollLeft($tableBodyWrapper.scrollLeft());
);
$(window).on('resize', function()
$tableHeadWrapper.width($tableWidthTracker.width());
);
table.table-bordered>thead>tr>th
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
table.table-bordered>tbody>tr>td
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 5px 5px 5px 5px;
.table-wrapper
position: relative;
margin: 10px;
.table-head-wrapper
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
.table-body-wrapper
height: 70vh;
overflow: auto;
.table-body-wrapper>.table
margin: 0;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<h1>Fixed Header</h1>answered Mar 8 at 21:03
Munim MunnaMunim Munna
10.3k41543
add a comment |
8
+100
Use vh unit to set table height, that will resolve different screen size issue.
You can also use JavaScript to set table height responsive to screen more accurately.
Table with fixed header without DataTables:
var data = [
"billdate": "2018-08-01",
"outlet": "JAYANAGAR",
"gross": 274659,
"discount": 297,
"GST": 16479,
"amount": 290954
,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM",
"gross": 55185,
"discount": 0,
"GST": 3074,
"amount": 58281
,
"billdate": "2018-08-01",
"outlet": "KOLAR",
"gross": 62513,
"discount": 0,
"GST": 3306,
"amount": 65880
,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR",
"gross": 279509,
"discount": 68,
"GST": 16582,
"amount": 296125
,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM",
"gross": 53462,
"discount": 0,
"GST": 3064,
"amount": 56545
,
"billdate": "2018-08-02",
"outlet": "KOLAR",
"gross": 68651,
"discount": 0,
"GST": 3492,
"amount": 72213
,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR",
"gross": 327097,
"discount": 539,
"GST": 19945,
"amount": 346605
,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM",
"gross": 59341,
"discount": 105,
"GST": 3370,
"amount": 62459
,
"billdate": "2018-08-03",
"outlet": "KOLAR",
"gross": 61953,
"discount": 0,
"GST": 3225,
"amount": 65248
,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR",
"gross": 490465,
"discount": 839,
"GST": 28465,
"amount": 518212
,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM",
"gross": 99212,
"discount": 0,
"GST": 5567,
"amount": 104801
,
"billdate": "2018-08-04",
"outlet": "KOLAR",
"gross": 131349,
"discount": 0,
"GST": 6676,
"amount": 138151
,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR",
"gross": 594466,
"discount": 591,
"GST": 34374,
"amount": 628358
,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM",
"gross": 109134,
"discount": 0,
"GST": 6067,
"amount": 115223
,
"billdate": "2018-08-05",
"outlet": "KOLAR",
"gross": 127449,
"discount": 0,
"GST": 6511,
"amount": 134107
,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR",
"gross": 167811,
"discount": 0,
"GST": 9968,
"amount": 177866
,
"billdate": "2018-08-06",
"outlet": "KOLAR",
"gross": 62796,
"discount": 0,
"GST": 3257,
"amount": 66095
,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR",
"gross": 268298,
"discount": 268,
"GST": 15943,
"amount": 284069
,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM",
"gross": 55381,
"discount": 0,
"GST": 3383,
"amount": 58789
,
"billdate": "2018-08-07",
"outlet": "KOLAR",
"gross": 64586,
"discount": 6,
"GST": 3285,
"amount": 67886
,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR",
"gross": 295544,
"discount": 246,
"GST": 17716,
"amount": 313128
,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM",
"gross": 56453,
"discount": 0,
"GST": 3462,
"amount": 59939
,
"billdate": "2018-08-08",
"outlet": "KOLAR",
"gross": 65159,
"discount": 0,
"GST": 3381,
"amount": 68558
,
"billdate": "2018-08-09",
"outlet": "JAYANAGAR",
"gross": 303778,
"discount": 201,
"GST": 18115,
"amount": 321797
,
"billdate": "2018-08-09",
"outlet": "MALLESHWARAM",
"gross": 60795,
"discount": 0,
"GST": 3620,
"amount": 64431
,
"billdate": "2018-08-09",
"outlet": "KOLAR",
"gross": 54495,
"discount": 0,
"GST": 2841,
"amount": 57352
,
"billdate": "2018-08-10",
"outlet": "JAYANAGAR",
"gross": 305223,
"discount": 53,
"GST": 18287,
"amount": 323556
,
"billdate": "2018-08-10",
"outlet": "MALLESHWARAM",
"gross": 55584,
"discount": 36,
"GST": 3207,
"amount": 58772
,
"billdate": "2018-08-10",
"outlet": "KOLAR",
"gross": 41584,
"discount": 0,
"GST": 2128,
"amount": 43722
,
"billdate": "2018-08-11",
"outlet": "JAYANAGAR",
"gross": 439024,
"discount": 177,
"GST": 25148,
"amount": 464127
,
"billdate": "2018-08-11",
"outlet": "MALLESHWARAM",
"gross": 88009,
"discount": 0,
"GST": 5090,
"amount": 93110
,
"billdate": "2018-08-11",
"outlet": "KOLAR",
"gross": 59188,
"discount": 0,
"GST": 3156,
"amount": 62213
,
"billdate": "2018-08-12",
"outlet": "JAYANAGAR",
"gross": 593776,
"discount": 809,
"GST": 33689,
"amount": 626772
,
"billdate": "2018-08-12",
"outlet": "MALLESHWARAM",
"gross": 119723,
"discount": 45,
"GST": 7245,
"amount": 126933
,
"billdate": "2018-08-12",
"outlet": "KOLAR",
"gross": 59926,
"discount": 0,
"GST": 3170,
"amount": 63119
,
"billdate": "2018-08-13",
"outlet": "JAYANAGAR",
"gross": 157580,
"discount": 340,
"GST": 10053,
"amount": 167391
,
"billdate": "2018-08-13",
"outlet": "KOLAR",
"gross": 25730,
"discount": 0,
"GST": 1368,
"amount": 27110
,
"billdate": "2018-08-14",
"outlet": "JAYANAGAR",
"gross": 260106,
"discount": 298,
"GST": 15181,
"amount": 275115
,
"billdate": "2018-08-14",
"outlet": "MALLESHWARAM",
"gross": 55145,
"discount": 19,
"GST": 3480,
"amount": 58633
,
"billdate": "2018-08-14",
"outlet": "KOLAR",
"gross": 36664,
"discount": 0,
"GST": 1916,
"amount": 37920
,
"billdate": "2018-08-15",
"outlet": "JAYANAGAR",
"gross": 478163,
"discount": 688,
"GST": 27138,
"amount": 504753
,
"billdate": "2018-08-15",
"outlet": "MALLESHWARAM",
"gross": 98179,
"discount": 0,
"GST": 5661,
"amount": 103855
,
"billdate": "2018-08-15",
"outlet": "KOLAR",
"gross": 98536,
"discount": 0,
"GST": 4964,
"amount": 103519
,
"billdate": "2018-08-16",
"outlet": "JAYANAGAR",
"gross": 277139,
"discount": 594,
"GST": 16406,
"amount": 293049
,
"billdate": "2018-08-16",
"outlet": "MALLESHWARAM",
"gross": 52828,
"discount": 0,
"GST": 3227,
"amount": 56071
,
"billdate": "2018-08-16",
"outlet": "KOLAR",
"gross": 53312,
"discount": 0,
"GST": 2730,
"amount": 56061
,
"billdate": "2018-08-17",
"outlet": "JAYANAGAR",
"gross": 329539,
"discount": 91,
"GST": 19882,
"amount": 349456
,
"billdate": "2018-08-17",
"outlet": "MALLESHWARAM",
"gross": 62946,
"discount": 0,
"GST": 3659,
"amount": 66624
,
"billdate": "2018-08-17",
"outlet": "KOLAR",
"gross": 69126,
"discount": 0,
"GST": 3501,
"amount": 72643
,
"billdate": "2018-08-18",
"outlet": "JAYANAGAR",
"gross": 443783,
"discount": 724,
"GST": 25712,
"amount": 468771
,
"billdate": "2018-08-18",
"outlet": "MALLESHWARAM",
"gross": 95622,
"discount": 0,
"GST": 5507,
"amount": 101151
,
"billdate": "2018-08-18",
"outlet": "KOLAR",
"gross": 107235,
"discount": 0,
"GST": 5683,
"amount": 112950
,
"billdate": "2018-08-19",
"outlet": "JAYANAGAR",
"gross": 517922,
"discount": 181,
"GST": 28972,
"amount": 546845
,
"billdate": "2018-08-19",
"outlet": "MALLESHWARAM",
"gross": 96821,
"discount": 0,
"GST": 5490,
"amount": 102334
,
"billdate": "2018-08-19",
"outlet": "KOLAR",
"gross": 94158,
"discount": 0,
"GST": 4909,
"amount": 99089
,
"billdate": "2018-08-20",
"outlet": "JAYANAGAR",
"gross": 156224,
"discount": 35,
"GST": 9423,
"amount": 165700
,
"billdate": "2018-08-20",
"outlet": "KOLAR",
"gross": 45547,
"discount": 0,
"GST": 2347,
"amount": 47905
,
"billdate": "2018-08-21",
"outlet": "JAYANAGAR",
"gross": 289268,
"discount": 214,
"GST": 17613,
"amount": 306776
,
"billdate": "2018-08-21",
"outlet": "MALLESHWARAM",
"gross": 57684,
"discount": 0,
"GST": 3374,
"amount": 61080
,
"billdate": "2018-08-21",
"outlet": "KOLAR",
"gross": 57725,
"discount": 0,
"GST": 2950,
"amount": 60682
,
"billdate": "2018-08-22",
"outlet": "JAYANAGAR",
"gross": 395657,
"discount": 159,
"GST": 22808,
"amount": 418418
,
"billdate": "2018-08-22",
"outlet": "MALLESHWARAM",
"gross": 82752,
"discount": 0,
"GST": 4618,
"amount": 87390
,
"billdate": "2018-08-22",
"outlet": "KOLAR",
"gross": 74048,
"discount": 0,
"GST": 3953,
"amount": 77922
,
"billdate": "2018-08-23",
"outlet": "JAYANAGAR",
"gross": 302731,
"discount": 1124,
"GST": 17774,
"amount": 319472
,
"billdate": "2018-08-23",
"outlet": "MALLESHWARAM",
"gross": 63555,
"discount": 0,
"GST": 3565,
"amount": 67142
,
"billdate": "2018-08-23",
"outlet": "KOLAR",
"gross": 53637,
"discount": 0,
"GST": 2860,
"amount": 56506
,
"billdate": "2018-08-24",
"outlet": "JAYANAGAR",
"gross": 284354,
"discount": 774,
"GST": 16423,
"amount": 300111
,
"billdate": "2018-08-24",
"outlet": "MALLESHWARAM",
"gross": 48130,
"discount": 0,
"GST": 2857,
"amount": 50997
,
"billdate": "2018-08-24",
"outlet": "KOLAR",
"gross": 55040,
"discount": 0,
"GST": 2871,
"amount": 57926
]
let formatData = function(data)
let billdates = [];
let outlets = [];
data.forEach(element =>
if (billdates.indexOf(element.billdate) == -1)
billdates.push(element.billdate);
if (outlets.indexOf(element.outlet) == -1)
outlets.push(element.outlet);
);
return
data: data,
billdates: billdates,
outlets: outlets,
;
;
let renderTable = function(data)
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("dailySales");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "BillDate";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let grandGross = 0;
let grandDiscount = 0;
let grandGst = 0;
let outletWiseTotal = ;
let outletWiseGross = ;
let outletWiseDiscount = ;
let outletWiseGst = ;
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element =>
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
outletWiseGross[element] = 0;
outletWiseDiscount[element] = 0;
outletWiseGst[element] = 0;
data.forEach(el =>
if (el.outlet == element)
outletWiseTotal[element] += parseInt(el.amount);
outletWiseGross[element] += parseInt(el.gross);
outletWiseDiscount[element] += parseInt(el.discount);
outletWiseGst[element] += parseInt(el.GST);
);
grandTotal += outletWiseTotal[element];
grandGross += outletWiseGross[element];
grandDiscount += outletWiseDiscount[element];
grandGst += outletWiseGst[element];
);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "";
headerRow.appendChild(th);
for (i = 0; i < outlets.length + 1; i++)
th = document.createElement("th");
th.innerHTML = "Discount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "GST";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Net Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Gross Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
headerRow = document.createElement("tr");
td = document.createElement("th");
td.innerHTML = "Total";
td.classList.add("text-center");
headerRow.appendChild(td);
outlets.forEach(element =>
td = document.createElement("th");
td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
);
td = document.createElement("th");
td.innerHTML = grandTotal.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGst.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGross.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element =>
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
let totalGross = 0;
let totalDiscount = 0;
let totalGST = 0;
outlets.forEach(outlet =>
let ta = 0;
let tg = 0;
let tdi = 0;
let tgst = 0;
data.forEach(d =>
if (d.billdate == element && d.outlet == outlet)
total += parseInt(d.amount);
totalGross += parseInt(d.gross);
totalDiscount += parseInt(d.discount);
totalGST += parseInt(d.GST);
ta = d.amount;
tg = d.gross;
tdi = d.discount;
tgst = d.GST;
);
td = document.createElement("td");
td.innerHTML = tg.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tdi.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tgst.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = ta.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
);
/* console.log("row is : " , row.children ) */
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGST.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGross.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
tbody.appendChild(row);
);
table.appendChild(tbody);
document.body.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
wrapTable($(table));
let formatedData = formatData(data);
renderTable(formatedData);
function wrapTable($table)
let $tableWrapper = $('<div>').addClass('table-wrapper').insertAfter($table);
let $tableBodyWrapper = $('<div>').addClass('table-body-wrapper').appendTo($tableWrapper);
let $tableWidthTracker = $('<div>').css('width', '100%').appendTo($tableBodyWrapper);
$table.appendTo($tableBodyWrapper);
let $tableHeadWrapper = $('<div>').addClass('table-head-wrapper').width($tableWidthTracker.width()).appendTo($tableWrapper);
let $tableDuplicateHead = $table.clone().find("tbody").remove().end().appendTo($tableHeadWrapper);
let $dupCols = $tableDuplicateHead.find('thead tr:last').children();
$table.find('thead tr:last').children().each(function(i)
$dupCols.eq(i).css('minWidth', $(this).outerWidth());
);
$tableBodyWrapper.on('scroll', function()
$tableHeadWrapper.scrollLeft($tableBodyWrapper.scrollLeft());
);
$(window).on('resize', function()
$tableHeadWrapper.width($tableWidthTracker.width());
);
table.table-bordered>thead>tr>th
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
table.table-bordered>tbody>tr>td
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 5px 5px 5px 5px;
.table-wrapper
position: relative;
margin: 10px;
.table-head-wrapper
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
.table-body-wrapper
height: 70vh;
overflow: auto;
.table-body-wrapper>.table
margin: 0;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<h1>Fixed Header</h1>answered Mar 8 at 21:03
Munim MunnaMunim Munna
10.3k41543
add a comment |
8
+100
8
+100
8
+100
Use vh unit to set table height, that will resolve different screen size issue.
You can also use JavaScript to set table height responsive to screen more accurately.
Table with fixed header without DataTables:
var data = [
"billdate": "2018-08-01",
"outlet": "JAYANAGAR",
"gross": 274659,
"discount": 297,
"GST": 16479,
"amount": 290954
,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM",
"gross": 55185,
"discount": 0,
"GST": 3074,
"amount": 58281
,
"billdate": "2018-08-01",
"outlet": "KOLAR",
"gross": 62513,
"discount": 0,
"GST": 3306,
"amount": 65880
,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR",
"gross": 279509,
"discount": 68,
"GST": 16582,
"amount": 296125
,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM",
"gross": 53462,
"discount": 0,
"GST": 3064,
"amount": 56545
,
"billdate": "2018-08-02",
"outlet": "KOLAR",
"gross": 68651,
"discount": 0,
"GST": 3492,
"amount": 72213
,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR",
"gross": 327097,
"discount": 539,
"GST": 19945,
"amount": 346605
,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM",
"gross": 59341,
"discount": 105,
"GST": 3370,
"amount": 62459
,
"billdate": "2018-08-03",
"outlet": "KOLAR",
"gross": 61953,
"discount": 0,
"GST": 3225,
"amount": 65248
,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR",
"gross": 490465,
"discount": 839,
"GST": 28465,
"amount": 518212
,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM",
"gross": 99212,
"discount": 0,
"GST": 5567,
"amount": 104801
,
"billdate": "2018-08-04",
"outlet": "KOLAR",
"gross": 131349,
"discount": 0,
"GST": 6676,
"amount": 138151
,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR",
"gross": 594466,
"discount": 591,
"GST": 34374,
"amount": 628358
,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM",
"gross": 109134,
"discount": 0,
"GST": 6067,
"amount": 115223
,
"billdate": "2018-08-05",
"outlet": "KOLAR",
"gross": 127449,
"discount": 0,
"GST": 6511,
"amount": 134107
,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR",
"gross": 167811,
"discount": 0,
"GST": 9968,
"amount": 177866
,
"billdate": "2018-08-06",
"outlet": "KOLAR",
"gross": 62796,
"discount": 0,
"GST": 3257,
"amount": 66095
,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR",
"gross": 268298,
"discount": 268,
"GST": 15943,
"amount": 284069
,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM",
"gross": 55381,
"discount": 0,
"GST": 3383,
"amount": 58789
,
"billdate": "2018-08-07",
"outlet": "KOLAR",
"gross": 64586,
"discount": 6,
"GST": 3285,
"amount": 67886
,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR",
"gross": 295544,
"discount": 246,
"GST": 17716,
"amount": 313128
,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM",
"gross": 56453,
"discount": 0,
"GST": 3462,
"amount": 59939
,
"billdate": "2018-08-08",
"outlet": "KOLAR",
"gross": 65159,
"discount": 0,
"GST": 3381,
"amount": 68558
,
"billdate": "2018-08-09",
"outlet": "JAYANAGAR",
"gross": 303778,
"discount": 201,
"GST": 18115,
"amount": 321797
,
"billdate": "2018-08-09",
"outlet": "MALLESHWARAM",
"gross": 60795,
"discount": 0,
"GST": 3620,
"amount": 64431
,
"billdate": "2018-08-09",
"outlet": "KOLAR",
"gross": 54495,
"discount": 0,
"GST": 2841,
"amount": 57352
,
"billdate": "2018-08-10",
"outlet": "JAYANAGAR",
"gross": 305223,
"discount": 53,
"GST": 18287,
"amount": 323556
,
"billdate": "2018-08-10",
"outlet": "MALLESHWARAM",
"gross": 55584,
"discount": 36,
"GST": 3207,
"amount": 58772
,
"billdate": "2018-08-10",
"outlet": "KOLAR",
"gross": 41584,
"discount": 0,
"GST": 2128,
"amount": 43722
,
"billdate": "2018-08-11",
"outlet": "JAYANAGAR",
"gross": 439024,
"discount": 177,
"GST": 25148,
"amount": 464127
,
"billdate": "2018-08-11",
"outlet": "MALLESHWARAM",
"gross": 88009,
"discount": 0,
"GST": 5090,
"amount": 93110
,
"billdate": "2018-08-11",
"outlet": "KOLAR",
"gross": 59188,
"discount": 0,
"GST": 3156,
"amount": 62213
,
"billdate": "2018-08-12",
"outlet": "JAYANAGAR",
"gross": 593776,
"discount": 809,
"GST": 33689,
"amount": 626772
,
"billdate": "2018-08-12",
"outlet": "MALLESHWARAM",
"gross": 119723,
"discount": 45,
"GST": 7245,
"amount": 126933
,
"billdate": "2018-08-12",
"outlet": "KOLAR",
"gross": 59926,
"discount": 0,
"GST": 3170,
"amount": 63119
,
"billdate": "2018-08-13",
"outlet": "JAYANAGAR",
"gross": 157580,
"discount": 340,
"GST": 10053,
"amount": 167391
,
"billdate": "2018-08-13",
"outlet": "KOLAR",
"gross": 25730,
"discount": 0,
"GST": 1368,
"amount": 27110
,
"billdate": "2018-08-14",
"outlet": "JAYANAGAR",
"gross": 260106,
"discount": 298,
"GST": 15181,
"amount": 275115
,
"billdate": "2018-08-14",
"outlet": "MALLESHWARAM",
"gross": 55145,
"discount": 19,
"GST": 3480,
"amount": 58633
,
"billdate": "2018-08-14",
"outlet": "KOLAR",
"gross": 36664,
"discount": 0,
"GST": 1916,
"amount": 37920
,
"billdate": "2018-08-15",
"outlet": "JAYANAGAR",
"gross": 478163,
"discount": 688,
"GST": 27138,
"amount": 504753
,
"billdate": "2018-08-15",
"outlet": "MALLESHWARAM",
"gross": 98179,
"discount": 0,
"GST": 5661,
"amount": 103855
,
"billdate": "2018-08-15",
"outlet": "KOLAR",
"gross": 98536,
"discount": 0,
"GST": 4964,
"amount": 103519
,
"billdate": "2018-08-16",
"outlet": "JAYANAGAR",
"gross": 277139,
"discount": 594,
"GST": 16406,
"amount": 293049
,
"billdate": "2018-08-16",
"outlet": "MALLESHWARAM",
"gross": 52828,
"discount": 0,
"GST": 3227,
"amount": 56071
,
"billdate": "2018-08-16",
"outlet": "KOLAR",
"gross": 53312,
"discount": 0,
"GST": 2730,
"amount": 56061
,
"billdate": "2018-08-17",
"outlet": "JAYANAGAR",
"gross": 329539,
"discount": 91,
"GST": 19882,
"amount": 349456
,
"billdate": "2018-08-17",
"outlet": "MALLESHWARAM",
"gross": 62946,
"discount": 0,
"GST": 3659,
"amount": 66624
,
"billdate": "2018-08-17",
"outlet": "KOLAR",
"gross": 69126,
"discount": 0,
"GST": 3501,
"amount": 72643
,
"billdate": "2018-08-18",
"outlet": "JAYANAGAR",
"gross": 443783,
"discount": 724,
"GST": 25712,
"amount": 468771
,
"billdate": "2018-08-18",
"outlet": "MALLESHWARAM",
"gross": 95622,
"discount": 0,
"GST": 5507,
"amount": 101151
,
"billdate": "2018-08-18",
"outlet": "KOLAR",
"gross": 107235,
"discount": 0,
"GST": 5683,
"amount": 112950
,
"billdate": "2018-08-19",
"outlet": "JAYANAGAR",
"gross": 517922,
"discount": 181,
"GST": 28972,
"amount": 546845
,
"billdate": "2018-08-19",
"outlet": "MALLESHWARAM",
"gross": 96821,
"discount": 0,
"GST": 5490,
"amount": 102334
,
"billdate": "2018-08-19",
"outlet": "KOLAR",
"gross": 94158,
"discount": 0,
"GST": 4909,
"amount": 99089
,
"billdate": "2018-08-20",
"outlet": "JAYANAGAR",
"gross": 156224,
"discount": 35,
"GST": 9423,
"amount": 165700
,
"billdate": "2018-08-20",
"outlet": "KOLAR",
"gross": 45547,
"discount": 0,
"GST": 2347,
"amount": 47905
,
"billdate": "2018-08-21",
"outlet": "JAYANAGAR",
"gross": 289268,
"discount": 214,
"GST": 17613,
"amount": 306776
,
"billdate": "2018-08-21",
"outlet": "MALLESHWARAM",
"gross": 57684,
"discount": 0,
"GST": 3374,
"amount": 61080
,
"billdate": "2018-08-21",
"outlet": "KOLAR",
"gross": 57725,
"discount": 0,
"GST": 2950,
"amount": 60682
,
"billdate": "2018-08-22",
"outlet": "JAYANAGAR",
"gross": 395657,
"discount": 159,
"GST": 22808,
"amount": 418418
,
"billdate": "2018-08-22",
"outlet": "MALLESHWARAM",
"gross": 82752,
"discount": 0,
"GST": 4618,
"amount": 87390
,
"billdate": "2018-08-22",
"outlet": "KOLAR",
"gross": 74048,
"discount": 0,
"GST": 3953,
"amount": 77922
,
"billdate": "2018-08-23",
"outlet": "JAYANAGAR",
"gross": 302731,
"discount": 1124,
"GST": 17774,
"amount": 319472
,
"billdate": "2018-08-23",
"outlet": "MALLESHWARAM",
"gross": 63555,
"discount": 0,
"GST": 3565,
"amount": 67142
,
"billdate": "2018-08-23",
"outlet": "KOLAR",
"gross": 53637,
"discount": 0,
"GST": 2860,
"amount": 56506
,
"billdate": "2018-08-24",
"outlet": "JAYANAGAR",
"gross": 284354,
"discount": 774,
"GST": 16423,
"amount": 300111
,
"billdate": "2018-08-24",
"outlet": "MALLESHWARAM",
"gross": 48130,
"discount": 0,
"GST": 2857,
"amount": 50997
,
"billdate": "2018-08-24",
"outlet": "KOLAR",
"gross": 55040,
"discount": 0,
"GST": 2871,
"amount": 57926
]
let formatData = function(data)
let billdates = [];
let outlets = [];
data.forEach(element =>
if (billdates.indexOf(element.billdate) == -1)
billdates.push(element.billdate);
if (outlets.indexOf(element.outlet) == -1)
outlets.push(element.outlet);
);
return
data: data,
billdates: billdates,
outlets: outlets,
;
;
let renderTable = function(data)
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("dailySales");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "BillDate";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let grandGross = 0;
let grandDiscount = 0;
let grandGst = 0;
let outletWiseTotal = ;
let outletWiseGross = ;
let outletWiseDiscount = ;
let outletWiseGst = ;
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element =>
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
outletWiseGross[element] = 0;
outletWiseDiscount[element] = 0;
outletWiseGst[element] = 0;
data.forEach(el =>
if (el.outlet == element)
outletWiseTotal[element] += parseInt(el.amount);
outletWiseGross[element] += parseInt(el.gross);
outletWiseDiscount[element] += parseInt(el.discount);
outletWiseGst[element] += parseInt(el.GST);
);
grandTotal += outletWiseTotal[element];
grandGross += outletWiseGross[element];
grandDiscount += outletWiseDiscount[element];
grandGst += outletWiseGst[element];
);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "";
headerRow.appendChild(th);
for (i = 0; i < outlets.length + 1; i++)
th = document.createElement("th");
th.innerHTML = "Discount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "GST";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Net Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Gross Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
headerRow = document.createElement("tr");
td = document.createElement("th");
td.innerHTML = "Total";
td.classList.add("text-center");
headerRow.appendChild(td);
outlets.forEach(element =>
td = document.createElement("th");
td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
);
td = document.createElement("th");
td.innerHTML = grandTotal.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGst.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGross.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element =>
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
let totalGross = 0;
let totalDiscount = 0;
let totalGST = 0;
outlets.forEach(outlet =>
let ta = 0;
let tg = 0;
let tdi = 0;
let tgst = 0;
data.forEach(d =>
if (d.billdate == element && d.outlet == outlet)
total += parseInt(d.amount);
totalGross += parseInt(d.gross);
totalDiscount += parseInt(d.discount);
totalGST += parseInt(d.GST);
ta = d.amount;
tg = d.gross;
tdi = d.discount;
tgst = d.GST;
);
td = document.createElement("td");
td.innerHTML = tg.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tdi.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tgst.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = ta.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
);
/* console.log("row is : " , row.children ) */
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGST.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGross.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
tbody.appendChild(row);
);
table.appendChild(tbody);
document.body.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
wrapTable($(table));
let formatedData = formatData(data);
renderTable(formatedData);
function wrapTable($table)
let $tableWrapper = $('<div>').addClass('table-wrapper').insertAfter($table);
let $tableBodyWrapper = $('<div>').addClass('table-body-wrapper').appendTo($tableWrapper);
let $tableWidthTracker = $('<div>').css('width', '100%').appendTo($tableBodyWrapper);
$table.appendTo($tableBodyWrapper);
let $tableHeadWrapper = $('<div>').addClass('table-head-wrapper').width($tableWidthTracker.width()).appendTo($tableWrapper);
let $tableDuplicateHead = $table.clone().find("tbody").remove().end().appendTo($tableHeadWrapper);
let $dupCols = $tableDuplicateHead.find('thead tr:last').children();
$table.find('thead tr:last').children().each(function(i)
$dupCols.eq(i).css('minWidth', $(this).outerWidth());
);
$tableBodyWrapper.on('scroll', function()
$tableHeadWrapper.scrollLeft($tableBodyWrapper.scrollLeft());
);
$(window).on('resize', function()
$tableHeadWrapper.width($tableWidthTracker.width());
);
table.table-bordered>thead>tr>th
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
table.table-bordered>tbody>tr>td
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 5px 5px 5px 5px;
.table-wrapper
position: relative;
margin: 10px;
.table-head-wrapper
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
.table-body-wrapper
height: 70vh;
overflow: auto;
.table-body-wrapper>.table
margin: 0;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<h1>Fixed Header</h1>answered Mar 8 at 21:03
Munim MunnaMunim Munna
10.3k41543
Use vh unit to set table height, that will resolve different screen size issue.
You can also use JavaScript to set table height responsive to screen more accurately.
Table with fixed header without DataTables:
var data = [
"billdate": "2018-08-01",
"outlet": "JAYANAGAR",
"gross": 274659,
"discount": 297,
"GST": 16479,
"amount": 290954
,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM",
"gross": 55185,
"discount": 0,
"GST": 3074,
"amount": 58281
,
"billdate": "2018-08-01",
"outlet": "KOLAR",
"gross": 62513,
"discount": 0,
"GST": 3306,
"amount": 65880
,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR",
"gross": 279509,
"discount": 68,
"GST": 16582,
"amount": 296125
,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM",
"gross": 53462,
"discount": 0,
"GST": 3064,
"amount": 56545
,
"billdate": "2018-08-02",
"outlet": "KOLAR",
"gross": 68651,
"discount": 0,
"GST": 3492,
"amount": 72213
,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR",
"gross": 327097,
"discount": 539,
"GST": 19945,
"amount": 346605
,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM",
"gross": 59341,
"discount": 105,
"GST": 3370,
"amount": 62459
,
"billdate": "2018-08-03",
"outlet": "KOLAR",
"gross": 61953,
"discount": 0,
"GST": 3225,
"amount": 65248
,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR",
"gross": 490465,
"discount": 839,
"GST": 28465,
"amount": 518212
,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM",
"gross": 99212,
"discount": 0,
"GST": 5567,
"amount": 104801
,
"billdate": "2018-08-04",
"outlet": "KOLAR",
"gross": 131349,
"discount": 0,
"GST": 6676,
"amount": 138151
,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR",
"gross": 594466,
"discount": 591,
"GST": 34374,
"amount": 628358
,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM",
"gross": 109134,
"discount": 0,
"GST": 6067,
"amount": 115223
,
"billdate": "2018-08-05",
"outlet": "KOLAR",
"gross": 127449,
"discount": 0,
"GST": 6511,
"amount": 134107
,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR",
"gross": 167811,
"discount": 0,
"GST": 9968,
"amount": 177866
,
"billdate": "2018-08-06",
"outlet": "KOLAR",
"gross": 62796,
"discount": 0,
"GST": 3257,
"amount": 66095
,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR",
"gross": 268298,
"discount": 268,
"GST": 15943,
"amount": 284069
,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM",
"gross": 55381,
"discount": 0,
"GST": 3383,
"amount": 58789
,
"billdate": "2018-08-07",
"outlet": "KOLAR",
"gross": 64586,
"discount": 6,
"GST": 3285,
"amount": 67886
,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR",
"gross": 295544,
"discount": 246,
"GST": 17716,
"amount": 313128
,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM",
"gross": 56453,
"discount": 0,
"GST": 3462,
"amount": 59939
,
"billdate": "2018-08-08",
"outlet": "KOLAR",
"gross": 65159,
"discount": 0,
"GST": 3381,
"amount": 68558
,
"billdate": "2018-08-09",
"outlet": "JAYANAGAR",
"gross": 303778,
"discount": 201,
"GST": 18115,
"amount": 321797
,
"billdate": "2018-08-09",
"outlet": "MALLESHWARAM",
"gross": 60795,
"discount": 0,
"GST": 3620,
"amount": 64431
,
"billdate": "2018-08-09",
"outlet": "KOLAR",
"gross": 54495,
"discount": 0,
"GST": 2841,
"amount": 57352
,
"billdate": "2018-08-10",
"outlet": "JAYANAGAR",
"gross": 305223,
"discount": 53,
"GST": 18287,
"amount": 323556
,
"billdate": "2018-08-10",
"outlet": "MALLESHWARAM",
"gross": 55584,
"discount": 36,
"GST": 3207,
"amount": 58772
,
"billdate": "2018-08-10",
"outlet": "KOLAR",
"gross": 41584,
"discount": 0,
"GST": 2128,
"amount": 43722
,
"billdate": "2018-08-11",
"outlet": "JAYANAGAR",
"gross": 439024,
"discount": 177,
"GST": 25148,
"amount": 464127
,
"billdate": "2018-08-11",
"outlet": "MALLESHWARAM",
"gross": 88009,
"discount": 0,
"GST": 5090,
"amount": 93110
,
"billdate": "2018-08-11",
"outlet": "KOLAR",
"gross": 59188,
"discount": 0,
"GST": 3156,
"amount": 62213
,
"billdate": "2018-08-12",
"outlet": "JAYANAGAR",
"gross": 593776,
"discount": 809,
"GST": 33689,
"amount": 626772
,
"billdate": "2018-08-12",
"outlet": "MALLESHWARAM",
"gross": 119723,
"discount": 45,
"GST": 7245,
"amount": 126933
,
"billdate": "2018-08-12",
"outlet": "KOLAR",
"gross": 59926,
"discount": 0,
"GST": 3170,
"amount": 63119
,
"billdate": "2018-08-13",
"outlet": "JAYANAGAR",
"gross": 157580,
"discount": 340,
"GST": 10053,
"amount": 167391
,
"billdate": "2018-08-13",
"outlet": "KOLAR",
"gross": 25730,
"discount": 0,
"GST": 1368,
"amount": 27110
,
"billdate": "2018-08-14",
"outlet": "JAYANAGAR",
"gross": 260106,
"discount": 298,
"GST": 15181,
"amount": 275115
,
"billdate": "2018-08-14",
"outlet": "MALLESHWARAM",
"gross": 55145,
"discount": 19,
"GST": 3480,
"amount": 58633
,
"billdate": "2018-08-14",
"outlet": "KOLAR",
"gross": 36664,
"discount": 0,
"GST": 1916,
"amount": 37920
,
"billdate": "2018-08-15",
"outlet": "JAYANAGAR",
"gross": 478163,
"discount": 688,
"GST": 27138,
"amount": 504753
,
"billdate": "2018-08-15",
"outlet": "MALLESHWARAM",
"gross": 98179,
"discount": 0,
"GST": 5661,
"amount": 103855
,
"billdate": "2018-08-15",
"outlet": "KOLAR",
"gross": 98536,
"discount": 0,
"GST": 4964,
"amount": 103519
,
"billdate": "2018-08-16",
"outlet": "JAYANAGAR",
"gross": 277139,
"discount": 594,
"GST": 16406,
"amount": 293049
,
"billdate": "2018-08-16",
"outlet": "MALLESHWARAM",
"gross": 52828,
"discount": 0,
"GST": 3227,
"amount": 56071
,
"billdate": "2018-08-16",
"outlet": "KOLAR",
"gross": 53312,
"discount": 0,
"GST": 2730,
"amount": 56061
,
"billdate": "2018-08-17",
"outlet": "JAYANAGAR",
"gross": 329539,
"discount": 91,
"GST": 19882,
"amount": 349456
,
"billdate": "2018-08-17",
"outlet": "MALLESHWARAM",
"gross": 62946,
"discount": 0,
"GST": 3659,
"amount": 66624
,
"billdate": "2018-08-17",
"outlet": "KOLAR",
"gross": 69126,
"discount": 0,
"GST": 3501,
"amount": 72643
,
"billdate": "2018-08-18",
"outlet": "JAYANAGAR",
"gross": 443783,
"discount": 724,
"GST": 25712,
"amount": 468771
,
"billdate": "2018-08-18",
"outlet": "MALLESHWARAM",
"gross": 95622,
"discount": 0,
"GST": 5507,
"amount": 101151
,
"billdate": "2018-08-18",
"outlet": "KOLAR",
"gross": 107235,
"discount": 0,
"GST": 5683,
"amount": 112950
,
"billdate": "2018-08-19",
"outlet": "JAYANAGAR",
"gross": 517922,
"discount": 181,
"GST": 28972,
"amount": 546845
,
"billdate": "2018-08-19",
"outlet": "MALLESHWARAM",
"gross": 96821,
"discount": 0,
"GST": 5490,
"amount": 102334
,
"billdate": "2018-08-19",
"outlet": "KOLAR",
"gross": 94158,
"discount": 0,
"GST": 4909,
"amount": 99089
,
"billdate": "2018-08-20",
"outlet": "JAYANAGAR",
"gross": 156224,
"discount": 35,
"GST": 9423,
"amount": 165700
,
"billdate": "2018-08-20",
"outlet": "KOLAR",
"gross": 45547,
"discount": 0,
"GST": 2347,
"amount": 47905
,
"billdate": "2018-08-21",
"outlet": "JAYANAGAR",
"gross": 289268,
"discount": 214,
"GST": 17613,
"amount": 306776
,
"billdate": "2018-08-21",
"outlet": "MALLESHWARAM",
"gross": 57684,
"discount": 0,
"GST": 3374,
"amount": 61080
,
"billdate": "2018-08-21",
"outlet": "KOLAR",
"gross": 57725,
"discount": 0,
"GST": 2950,
"amount": 60682
,
"billdate": "2018-08-22",
"outlet": "JAYANAGAR",
"gross": 395657,
"discount": 159,
"GST": 22808,
"amount": 418418
,
"billdate": "2018-08-22",
"outlet": "MALLESHWARAM",
"gross": 82752,
"discount": 0,
"GST": 4618,
"amount": 87390
,
"billdate": "2018-08-22",
"outlet": "KOLAR",
"gross": 74048,
"discount": 0,
"GST": 3953,
"amount": 77922
,
"billdate": "2018-08-23",
"outlet": "JAYANAGAR",
"gross": 302731,
"discount": 1124,
"GST": 17774,
"amount": 319472
,
"billdate": "2018-08-23",
"outlet": "MALLESHWARAM",
"gross": 63555,
"discount": 0,
"GST": 3565,
"amount": 67142
,
"billdate": "2018-08-23",
"outlet": "KOLAR",
"gross": 53637,
"discount": 0,
"GST": 2860,
"amount": 56506
,
"billdate": "2018-08-24",
"outlet": "JAYANAGAR",
"gross": 284354,
"discount": 774,
"GST": 16423,
"amount": 300111
,
"billdate": "2018-08-24",
"outlet": "MALLESHWARAM",
"gross": 48130,
"discount": 0,
"GST": 2857,
"amount": 50997
,
"billdate": "2018-08-24",
"outlet": "KOLAR",
"gross": 55040,
"discount": 0,
"GST": 2871,
"amount": 57926
]
let formatData = function(data)
let billdates = [];
let outlets = [];
data.forEach(element =>
if (billdates.indexOf(element.billdate) == -1)
billdates.push(element.billdate);
if (outlets.indexOf(element.outlet) == -1)
outlets.push(element.outlet);
);
return
data: data,
billdates: billdates,
outlets: outlets,
;
;
let renderTable = function(data)
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("dailySales");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "BillDate";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let grandGross = 0;
let grandDiscount = 0;
let grandGst = 0;
let outletWiseTotal = ;
let outletWiseGross = ;
let outletWiseDiscount = ;
let outletWiseGst = ;
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element =>
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
outletWiseGross[element] = 0;
outletWiseDiscount[element] = 0;
outletWiseGst[element] = 0;
data.forEach(el =>
if (el.outlet == element)
outletWiseTotal[element] += parseInt(el.amount);
outletWiseGross[element] += parseInt(el.gross);
outletWiseDiscount[element] += parseInt(el.discount);
outletWiseGst[element] += parseInt(el.GST);
);
grandTotal += outletWiseTotal[element];
grandGross += outletWiseGross[element];
grandDiscount += outletWiseDiscount[element];
grandGst += outletWiseGst[element];
);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "";
headerRow.appendChild(th);
for (i = 0; i < outlets.length + 1; i++)
th = document.createElement("th");
th.innerHTML = "Discount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "GST";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Net Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Gross Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
headerRow = document.createElement("tr");
td = document.createElement("th");
td.innerHTML = "Total";
td.classList.add("text-center");
headerRow.appendChild(td);
outlets.forEach(element =>
td = document.createElement("th");
td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
);
td = document.createElement("th");
td.innerHTML = grandTotal.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGst.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGross.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element =>
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
let totalGross = 0;
let totalDiscount = 0;
let totalGST = 0;
outlets.forEach(outlet =>
let ta = 0;
let tg = 0;
let tdi = 0;
let tgst = 0;
data.forEach(d =>
if (d.billdate == element && d.outlet == outlet)
total += parseInt(d.amount);
totalGross += parseInt(d.gross);
totalDiscount += parseInt(d.discount);
totalGST += parseInt(d.GST);
ta = d.amount;
tg = d.gross;
tdi = d.discount;
tgst = d.GST;
);
td = document.createElement("td");
td.innerHTML = tg.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tdi.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tgst.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = ta.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
);
/* console.log("row is : " , row.children ) */
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGST.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGross.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
tbody.appendChild(row);
);
table.appendChild(tbody);
document.body.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
wrapTable($(table));
let formatedData = formatData(data);
renderTable(formatedData);
function wrapTable($table)
let $tableWrapper = $('<div>').addClass('table-wrapper').insertAfter($table);
let $tableBodyWrapper = $('<div>').addClass('table-body-wrapper').appendTo($tableWrapper);
let $tableWidthTracker = $('<div>').css('width', '100%').appendTo($tableBodyWrapper);
$table.appendTo($tableBodyWrapper);
let $tableHeadWrapper = $('<div>').addClass('table-head-wrapper').width($tableWidthTracker.width()).appendTo($tableWrapper);
let $tableDuplicateHead = $table.clone().find("tbody").remove().end().appendTo($tableHeadWrapper);
let $dupCols = $tableDuplicateHead.find('thead tr:last').children();
$table.find('thead tr:last').children().each(function(i)
$dupCols.eq(i).css('minWidth', $(this).outerWidth());
);
$tableBodyWrapper.on('scroll', function()
$tableHeadWrapper.scrollLeft($tableBodyWrapper.scrollLeft());
);
$(window).on('resize', function()
$tableHeadWrapper.width($tableWidthTracker.width());
);
table.table-bordered>thead>tr>th
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
table.table-bordered>tbody>tr>td
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 5px 5px 5px 5px;
.table-wrapper
position: relative;
margin: 10px;
.table-head-wrapper
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
.table-body-wrapper
height: 70vh;
overflow: auto;
.table-body-wrapper>.table
margin: 0;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<h1>Fixed Header</h1>var data = [
"billdate": "2018-08-01",
"outlet": "JAYANAGAR",
"gross": 274659,
"discount": 297,
"GST": 16479,
"amount": 290954
,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM",
"gross": 55185,
"discount": 0,
"GST": 3074,
"amount": 58281
,
"billdate": "2018-08-01",
"outlet": "KOLAR",
"gross": 62513,
"discount": 0,
"GST": 3306,
"amount": 65880
,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR",
"gross": 279509,
"discount": 68,
"GST": 16582,
"amount": 296125
,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM",
"gross": 53462,
"discount": 0,
"GST": 3064,
"amount": 56545
,
"billdate": "2018-08-02",
"outlet": "KOLAR",
"gross": 68651,
"discount": 0,
"GST": 3492,
"amount": 72213
,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR",
"gross": 327097,
"discount": 539,
"GST": 19945,
"amount": 346605
,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM",
"gross": 59341,
"discount": 105,
"GST": 3370,
"amount": 62459
,
"billdate": "2018-08-03",
"outlet": "KOLAR",
"gross": 61953,
"discount": 0,
"GST": 3225,
"amount": 65248
,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR",
"gross": 490465,
"discount": 839,
"GST": 28465,
"amount": 518212
,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM",
"gross": 99212,
"discount": 0,
"GST": 5567,
"amount": 104801
,
"billdate": "2018-08-04",
"outlet": "KOLAR",
"gross": 131349,
"discount": 0,
"GST": 6676,
"amount": 138151
,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR",
"gross": 594466,
"discount": 591,
"GST": 34374,
"amount": 628358
,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM",
"gross": 109134,
"discount": 0,
"GST": 6067,
"amount": 115223
,
"billdate": "2018-08-05",
"outlet": "KOLAR",
"gross": 127449,
"discount": 0,
"GST": 6511,
"amount": 134107
,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR",
"gross": 167811,
"discount": 0,
"GST": 9968,
"amount": 177866
,
"billdate": "2018-08-06",
"outlet": "KOLAR",
"gross": 62796,
"discount": 0,
"GST": 3257,
"amount": 66095
,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR",
"gross": 268298,
"discount": 268,
"GST": 15943,
"amount": 284069
,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM",
"gross": 55381,
"discount": 0,
"GST": 3383,
"amount": 58789
,
"billdate": "2018-08-07",
"outlet": "KOLAR",
"gross": 64586,
"discount": 6,
"GST": 3285,
"amount": 67886
,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR",
"gross": 295544,
"discount": 246,
"GST": 17716,
"amount": 313128
,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM",
"gross": 56453,
"discount": 0,
"GST": 3462,
"amount": 59939
,
"billdate": "2018-08-08",
"outlet": "KOLAR",
"gross": 65159,
"discount": 0,
"GST": 3381,
"amount": 68558
,
"billdate": "2018-08-09",
"outlet": "JAYANAGAR",
"gross": 303778,
"discount": 201,
"GST": 18115,
"amount": 321797
,
"billdate": "2018-08-09",
"outlet": "MALLESHWARAM",
"gross": 60795,
"discount": 0,
"GST": 3620,
"amount": 64431
,
"billdate": "2018-08-09",
"outlet": "KOLAR",
"gross": 54495,
"discount": 0,
"GST": 2841,
"amount": 57352
,
"billdate": "2018-08-10",
"outlet": "JAYANAGAR",
"gross": 305223,
"discount": 53,
"GST": 18287,
"amount": 323556
,
"billdate": "2018-08-10",
"outlet": "MALLESHWARAM",
"gross": 55584,
"discount": 36,
"GST": 3207,
"amount": 58772
,
"billdate": "2018-08-10",
"outlet": "KOLAR",
"gross": 41584,
"discount": 0,
"GST": 2128,
"amount": 43722
,
"billdate": "2018-08-11",
"outlet": "JAYANAGAR",
"gross": 439024,
"discount": 177,
"GST": 25148,
"amount": 464127
,
"billdate": "2018-08-11",
"outlet": "MALLESHWARAM",
"gross": 88009,
"discount": 0,
"GST": 5090,
"amount": 93110
,
"billdate": "2018-08-11",
"outlet": "KOLAR",
"gross": 59188,
"discount": 0,
"GST": 3156,
"amount": 62213
,
"billdate": "2018-08-12",
"outlet": "JAYANAGAR",
"gross": 593776,
"discount": 809,
"GST": 33689,
"amount": 626772
,
"billdate": "2018-08-12",
"outlet": "MALLESHWARAM",
"gross": 119723,
"discount": 45,
"GST": 7245,
"amount": 126933
,
"billdate": "2018-08-12",
"outlet": "KOLAR",
"gross": 59926,
"discount": 0,
"GST": 3170,
"amount": 63119
,
"billdate": "2018-08-13",
"outlet": "JAYANAGAR",
"gross": 157580,
"discount": 340,
"GST": 10053,
"amount": 167391
,
"billdate": "2018-08-13",
"outlet": "KOLAR",
"gross": 25730,
"discount": 0,
"GST": 1368,
"amount": 27110
,
"billdate": "2018-08-14",
"outlet": "JAYANAGAR",
"gross": 260106,
"discount": 298,
"GST": 15181,
"amount": 275115
,
"billdate": "2018-08-14",
"outlet": "MALLESHWARAM",
"gross": 55145,
"discount": 19,
"GST": 3480,
"amount": 58633
,
"billdate": "2018-08-14",
"outlet": "KOLAR",
"gross": 36664,
"discount": 0,
"GST": 1916,
"amount": 37920
,
"billdate": "2018-08-15",
"outlet": "JAYANAGAR",
"gross": 478163,
"discount": 688,
"GST": 27138,
"amount": 504753
,
"billdate": "2018-08-15",
"outlet": "MALLESHWARAM",
"gross": 98179,
"discount": 0,
"GST": 5661,
"amount": 103855
,
"billdate": "2018-08-15",
"outlet": "KOLAR",
"gross": 98536,
"discount": 0,
"GST": 4964,
"amount": 103519
,
"billdate": "2018-08-16",
"outlet": "JAYANAGAR",
"gross": 277139,
"discount": 594,
"GST": 16406,
"amount": 293049
,
"billdate": "2018-08-16",
"outlet": "MALLESHWARAM",
"gross": 52828,
"discount": 0,
"GST": 3227,
"amount": 56071
,
"billdate": "2018-08-16",
"outlet": "KOLAR",
"gross": 53312,
"discount": 0,
"GST": 2730,
"amount": 56061
,
"billdate": "2018-08-17",
"outlet": "JAYANAGAR",
"gross": 329539,
"discount": 91,
"GST": 19882,
"amount": 349456
,
"billdate": "2018-08-17",
"outlet": "MALLESHWARAM",
"gross": 62946,
"discount": 0,
"GST": 3659,
"amount": 66624
,
"billdate": "2018-08-17",
"outlet": "KOLAR",
"gross": 69126,
"discount": 0,
"GST": 3501,
"amount": 72643
,
"billdate": "2018-08-18",
"outlet": "JAYANAGAR",
"gross": 443783,
"discount": 724,
"GST": 25712,
"amount": 468771
,
"billdate": "2018-08-18",
"outlet": "MALLESHWARAM",
"gross": 95622,
"discount": 0,
"GST": 5507,
"amount": 101151
,
"billdate": "2018-08-18",
"outlet": "KOLAR",
"gross": 107235,
"discount": 0,
"GST": 5683,
"amount": 112950
,
"billdate": "2018-08-19",
"outlet": "JAYANAGAR",
"gross": 517922,
"discount": 181,
"GST": 28972,
"amount": 546845
,
"billdate": "2018-08-19",
"outlet": "MALLESHWARAM",
"gross": 96821,
"discount": 0,
"GST": 5490,
"amount": 102334
,
"billdate": "2018-08-19",
"outlet": "KOLAR",
"gross": 94158,
"discount": 0,
"GST": 4909,
"amount": 99089
,
"billdate": "2018-08-20",
"outlet": "JAYANAGAR",
"gross": 156224,
"discount": 35,
"GST": 9423,
"amount": 165700
,
"billdate": "2018-08-20",
"outlet": "KOLAR",
"gross": 45547,
"discount": 0,
"GST": 2347,
"amount": 47905
,
"billdate": "2018-08-21",
"outlet": "JAYANAGAR",
"gross": 289268,
"discount": 214,
"GST": 17613,
"amount": 306776
,
"billdate": "2018-08-21",
"outlet": "MALLESHWARAM",
"gross": 57684,
"discount": 0,
"GST": 3374,
"amount": 61080
,
"billdate": "2018-08-21",
"outlet": "KOLAR",
"gross": 57725,
"discount": 0,
"GST": 2950,
"amount": 60682
,
"billdate": "2018-08-22",
"outlet": "JAYANAGAR",
"gross": 395657,
"discount": 159,
"GST": 22808,
"amount": 418418
,
"billdate": "2018-08-22",
"outlet": "MALLESHWARAM",
"gross": 82752,
"discount": 0,
"GST": 4618,
"amount": 87390
,
"billdate": "2018-08-22",
"outlet": "KOLAR",
"gross": 74048,
"discount": 0,
"GST": 3953,
"amount": 77922
,
"billdate": "2018-08-23",
"outlet": "JAYANAGAR",
"gross": 302731,
"discount": 1124,
"GST": 17774,
"amount": 319472
,
"billdate": "2018-08-23",
"outlet": "MALLESHWARAM",
"gross": 63555,
"discount": 0,
"GST": 3565,
"amount": 67142
,
"billdate": "2018-08-23",
"outlet": "KOLAR",
"gross": 53637,
"discount": 0,
"GST": 2860,
"amount": 56506
,
"billdate": "2018-08-24",
"outlet": "JAYANAGAR",
"gross": 284354,
"discount": 774,
"GST": 16423,
"amount": 300111
,
"billdate": "2018-08-24",
"outlet": "MALLESHWARAM",
"gross": 48130,
"discount": 0,
"GST": 2857,
"amount": 50997
,
"billdate": "2018-08-24",
"outlet": "KOLAR",
"gross": 55040,
"discount": 0,
"GST": 2871,
"amount": 57926
]
let formatData = function(data)
let billdates = [];
let outlets = [];
data.forEach(element =>
if (billdates.indexOf(element.billdate) == -1)
billdates.push(element.billdate);
if (outlets.indexOf(element.outlet) == -1)
outlets.push(element.outlet);
);
return
data: data,
billdates: billdates,
outlets: outlets,
;
;
let renderTable = function(data)
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("dailySales");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "BillDate";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let grandGross = 0;
let grandDiscount = 0;
let grandGst = 0;
let outletWiseTotal = ;
let outletWiseGross = ;
let outletWiseDiscount = ;
let outletWiseGst = ;
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element =>
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
outletWiseGross[element] = 0;
outletWiseDiscount[element] = 0;
outletWiseGst[element] = 0;
data.forEach(el =>
if (el.outlet == element)
outletWiseTotal[element] += parseInt(el.amount);
outletWiseGross[element] += parseInt(el.gross);
outletWiseDiscount[element] += parseInt(el.discount);
outletWiseGst[element] += parseInt(el.GST);
);
grandTotal += outletWiseTotal[element];
grandGross += outletWiseGross[element];
grandDiscount += outletWiseDiscount[element];
grandGst += outletWiseGst[element];
);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "";
headerRow.appendChild(th);
for (i = 0; i < outlets.length + 1; i++)
th = document.createElement("th");
th.innerHTML = "Discount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "GST";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Net Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Gross Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
headerRow = document.createElement("tr");
td = document.createElement("th");
td.innerHTML = "Total";
td.classList.add("text-center");
headerRow.appendChild(td);
outlets.forEach(element =>
td = document.createElement("th");
td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
);
td = document.createElement("th");
td.innerHTML = grandTotal.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGst.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGross.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element =>
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
let totalGross = 0;
let totalDiscount = 0;
let totalGST = 0;
outlets.forEach(outlet =>
let ta = 0;
let tg = 0;
let tdi = 0;
let tgst = 0;
data.forEach(d =>
if (d.billdate == element && d.outlet == outlet)
total += parseInt(d.amount);
totalGross += parseInt(d.gross);
totalDiscount += parseInt(d.discount);
totalGST += parseInt(d.GST);
ta = d.amount;
tg = d.gross;
tdi = d.discount;
tgst = d.GST;
);
td = document.createElement("td");
td.innerHTML = tg.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tdi.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tgst.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = ta.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
);
/* console.log("row is : " , row.children ) */
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGST.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGross.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
tbody.appendChild(row);
);
table.appendChild(tbody);
document.body.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
wrapTable($(table));
let formatedData = formatData(data);
renderTable(formatedData);
function wrapTable($table)
let $tableWrapper = $('<div>').addClass('table-wrapper').insertAfter($table);
let $tableBodyWrapper = $('<div>').addClass('table-body-wrapper').appendTo($tableWrapper);
let $tableWidthTracker = $('<div>').css('width', '100%').appendTo($tableBodyWrapper);
$table.appendTo($tableBodyWrapper);
let $tableHeadWrapper = $('<div>').addClass('table-head-wrapper').width($tableWidthTracker.width()).appendTo($tableWrapper);
let $tableDuplicateHead = $table.clone().find("tbody").remove().end().appendTo($tableHeadWrapper);
let $dupCols = $tableDuplicateHead.find('thead tr:last').children();
$table.find('thead tr:last').children().each(function(i)
$dupCols.eq(i).css('minWidth', $(this).outerWidth());
);
$tableBodyWrapper.on('scroll', function()
$tableHeadWrapper.scrollLeft($tableBodyWrapper.scrollLeft());
);
$(window).on('resize', function()
$tableHeadWrapper.width($tableWidthTracker.width());
);
table.table-bordered>thead>tr>th
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
table.table-bordered>tbody>tr>td
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 5px 5px 5px 5px;
.table-wrapper
position: relative;
margin: 10px;
.table-head-wrapper
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
.table-body-wrapper
height: 70vh;
overflow: auto;
.table-body-wrapper>.table
margin: 0;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<h1>Fixed Header</h1>var data = [
"billdate": "2018-08-01",
"outlet": "JAYANAGAR",
"gross": 274659,
"discount": 297,
"GST": 16479,
"amount": 290954
,
"billdate": "2018-08-01",
"outlet": "MALLESHWARAM",
"gross": 55185,
"discount": 0,
"GST": 3074,
"amount": 58281
,
"billdate": "2018-08-01",
"outlet": "KOLAR",
"gross": 62513,
"discount": 0,
"GST": 3306,
"amount": 65880
,
"billdate": "2018-08-02",
"outlet": "JAYANAGAR",
"gross": 279509,
"discount": 68,
"GST": 16582,
"amount": 296125
,
"billdate": "2018-08-02",
"outlet": "MALLESHWARAM",
"gross": 53462,
"discount": 0,
"GST": 3064,
"amount": 56545
,
"billdate": "2018-08-02",
"outlet": "KOLAR",
"gross": 68651,
"discount": 0,
"GST": 3492,
"amount": 72213
,
"billdate": "2018-08-03",
"outlet": "JAYANAGAR",
"gross": 327097,
"discount": 539,
"GST": 19945,
"amount": 346605
,
"billdate": "2018-08-03",
"outlet": "MALLESHWARAM",
"gross": 59341,
"discount": 105,
"GST": 3370,
"amount": 62459
,
"billdate": "2018-08-03",
"outlet": "KOLAR",
"gross": 61953,
"discount": 0,
"GST": 3225,
"amount": 65248
,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR",
"gross": 490465,
"discount": 839,
"GST": 28465,
"amount": 518212
,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM",
"gross": 99212,
"discount": 0,
"GST": 5567,
"amount": 104801
,
"billdate": "2018-08-04",
"outlet": "KOLAR",
"gross": 131349,
"discount": 0,
"GST": 6676,
"amount": 138151
,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR",
"gross": 594466,
"discount": 591,
"GST": 34374,
"amount": 628358
,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM",
"gross": 109134,
"discount": 0,
"GST": 6067,
"amount": 115223
,
"billdate": "2018-08-05",
"outlet": "KOLAR",
"gross": 127449,
"discount": 0,
"GST": 6511,
"amount": 134107
,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR",
"gross": 167811,
"discount": 0,
"GST": 9968,
"amount": 177866
,
"billdate": "2018-08-06",
"outlet": "KOLAR",
"gross": 62796,
"discount": 0,
"GST": 3257,
"amount": 66095
,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR",
"gross": 268298,
"discount": 268,
"GST": 15943,
"amount": 284069
,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM",
"gross": 55381,
"discount": 0,
"GST": 3383,
"amount": 58789
,
"billdate": "2018-08-07",
"outlet": "KOLAR",
"gross": 64586,
"discount": 6,
"GST": 3285,
"amount": 67886
,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR",
"gross": 295544,
"discount": 246,
"GST": 17716,
"amount": 313128
,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM",
"gross": 56453,
"discount": 0,
"GST": 3462,
"amount": 59939
,
"billdate": "2018-08-08",
"outlet": "KOLAR",
"gross": 65159,
"discount": 0,
"GST": 3381,
"amount": 68558
,
"billdate": "2018-08-09",
"outlet": "JAYANAGAR",
"gross": 303778,
"discount": 201,
"GST": 18115,
"amount": 321797
,
"billdate": "2018-08-09",
"outlet": "MALLESHWARAM",
"gross": 60795,
"discount": 0,
"GST": 3620,
"amount": 64431
,
"billdate": "2018-08-09",
"outlet": "KOLAR",
"gross": 54495,
"discount": 0,
"GST": 2841,
"amount": 57352
,
"billdate": "2018-08-10",
"outlet": "JAYANAGAR",
"gross": 305223,
"discount": 53,
"GST": 18287,
"amount": 323556
,
"billdate": "2018-08-10",
"outlet": "MALLESHWARAM",
"gross": 55584,
"discount": 36,
"GST": 3207,
"amount": 58772
,
"billdate": "2018-08-10",
"outlet": "KOLAR",
"gross": 41584,
"discount": 0,
"GST": 2128,
"amount": 43722
,
"billdate": "2018-08-11",
"outlet": "JAYANAGAR",
"gross": 439024,
"discount": 177,
"GST": 25148,
"amount": 464127
,
"billdate": "2018-08-11",
"outlet": "MALLESHWARAM",
"gross": 88009,
"discount": 0,
"GST": 5090,
"amount": 93110
,
"billdate": "2018-08-11",
"outlet": "KOLAR",
"gross": 59188,
"discount": 0,
"GST": 3156,
"amount": 62213
,
"billdate": "2018-08-12",
"outlet": "JAYANAGAR",
"gross": 593776,
"discount": 809,
"GST": 33689,
"amount": 626772
,
"billdate": "2018-08-12",
"outlet": "MALLESHWARAM",
"gross": 119723,
"discount": 45,
"GST": 7245,
"amount": 126933
,
"billdate": "2018-08-12",
"outlet": "KOLAR",
"gross": 59926,
"discount": 0,
"GST": 3170,
"amount": 63119
,
"billdate": "2018-08-13",
"outlet": "JAYANAGAR",
"gross": 157580,
"discount": 340,
"GST": 10053,
"amount": 167391
,
"billdate": "2018-08-13",
"outlet": "KOLAR",
"gross": 25730,
"discount": 0,
"GST": 1368,
"amount": 27110
,
"billdate": "2018-08-14",
"outlet": "JAYANAGAR",
"gross": 260106,
"discount": 298,
"GST": 15181,
"amount": 275115
,
"billdate": "2018-08-14",
"outlet": "MALLESHWARAM",
"gross": 55145,
"discount": 19,
"GST": 3480,
"amount": 58633
,
"billdate": "2018-08-14",
"outlet": "KOLAR",
"gross": 36664,
"discount": 0,
"GST": 1916,
"amount": 37920
,
"billdate": "2018-08-15",
"outlet": "JAYANAGAR",
"gross": 478163,
"discount": 688,
"GST": 27138,
"amount": 504753
,
"billdate": "2018-08-15",
"outlet": "MALLESHWARAM",
"gross": 98179,
"discount": 0,
"GST": 5661,
"amount": 103855
,
"billdate": "2018-08-15",
"outlet": "KOLAR",
"gross": 98536,
"discount": 0,
"GST": 4964,
"amount": 103519
,
"billdate": "2018-08-16",
"outlet": "JAYANAGAR",
"gross": 277139,
"discount": 594,
"GST": 16406,
"amount": 293049
,
"billdate": "2018-08-16",
"outlet": "MALLESHWARAM",
"gross": 52828,
"discount": 0,
"GST": 3227,
"amount": 56071
,
"billdate": "2018-08-16",
"outlet": "KOLAR",
"gross": 53312,
"discount": 0,
"GST": 2730,
"amount": 56061
,
"billdate": "2018-08-17",
"outlet": "JAYANAGAR",
"gross": 329539,
"discount": 91,
"GST": 19882,
"amount": 349456
,
"billdate": "2018-08-17",
"outlet": "MALLESHWARAM",
"gross": 62946,
"discount": 0,
"GST": 3659,
"amount": 66624
,
"billdate": "2018-08-17",
"outlet": "KOLAR",
"gross": 69126,
"discount": 0,
"GST": 3501,
"amount": 72643
,
"billdate": "2018-08-18",
"outlet": "JAYANAGAR",
"gross": 443783,
"discount": 724,
"GST": 25712,
"amount": 468771
,
"billdate": "2018-08-18",
"outlet": "MALLESHWARAM",
"gross": 95622,
"discount": 0,
"GST": 5507,
"amount": 101151
,
"billdate": "2018-08-18",
"outlet": "KOLAR",
"gross": 107235,
"discount": 0,
"GST": 5683,
"amount": 112950
,
"billdate": "2018-08-19",
"outlet": "JAYANAGAR",
"gross": 517922,
"discount": 181,
"GST": 28972,
"amount": 546845
,
"billdate": "2018-08-19",
"outlet": "MALLESHWARAM",
"gross": 96821,
"discount": 0,
"GST": 5490,
"amount": 102334
,
"billdate": "2018-08-19",
"outlet": "KOLAR",
"gross": 94158,
"discount": 0,
"GST": 4909,
"amount": 99089
,
"billdate": "2018-08-20",
"outlet": "JAYANAGAR",
"gross": 156224,
"discount": 35,
"GST": 9423,
"amount": 165700
,
"billdate": "2018-08-20",
"outlet": "KOLAR",
"gross": 45547,
"discount": 0,
"GST": 2347,
"amount": 47905
,
"billdate": "2018-08-21",
"outlet": "JAYANAGAR",
"gross": 289268,
"discount": 214,
"GST": 17613,
"amount": 306776
,
"billdate": "2018-08-21",
"outlet": "MALLESHWARAM",
"gross": 57684,
"discount": 0,
"GST": 3374,
"amount": 61080
,
"billdate": "2018-08-21",
"outlet": "KOLAR",
"gross": 57725,
"discount": 0,
"GST": 2950,
"amount": 60682
,
"billdate": "2018-08-22",
"outlet": "JAYANAGAR",
"gross": 395657,
"discount": 159,
"GST": 22808,
"amount": 418418
,
"billdate": "2018-08-22",
"outlet": "MALLESHWARAM",
"gross": 82752,
"discount": 0,
"GST": 4618,
"amount": 87390
,
"billdate": "2018-08-22",
"outlet": "KOLAR",
"gross": 74048,
"discount": 0,
"GST": 3953,
"amount": 77922
,
"billdate": "2018-08-23",
"outlet": "JAYANAGAR",
"gross": 302731,
"discount": 1124,
"GST": 17774,
"amount": 319472
,
"billdate": "2018-08-23",
"outlet": "MALLESHWARAM",
"gross": 63555,
"discount": 0,
"GST": 3565,
"amount": 67142
,
"billdate": "2018-08-23",
"outlet": "KOLAR",
"gross": 53637,
"discount": 0,
"GST": 2860,
"amount": 56506
,
"billdate": "2018-08-24",
"outlet": "JAYANAGAR",
"gross": 284354,
"discount": 774,
"GST": 16423,
"amount": 300111
,
"billdate": "2018-08-24",
"outlet": "MALLESHWARAM",
"gross": 48130,
"discount": 0,
"GST": 2857,
"amount": 50997
,
"billdate": "2018-08-24",
"outlet": "KOLAR",
"gross": 55040,
"discount": 0,
"GST": 2871,
"amount": 57926
]
let formatData = function(data)
let billdates = [];
let outlets = [];
data.forEach(element =>
if (billdates.indexOf(element.billdate) == -1)
billdates.push(element.billdate);
if (outlets.indexOf(element.outlet) == -1)
outlets.push(element.outlet);
);
return
data: data,
billdates: billdates,
outlets: outlets,
;
;
let renderTable = function(data)
billdates = data.billdates;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("dailySales");
let table = document.createElement("table");
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let th = document.createElement("th");
th.innerHTML = "BillDate";
th.classList.add("text-center");
headerRow.appendChild(th);
let grandTotal = 0;
let grandGross = 0;
let grandDiscount = 0;
let grandGst = 0;
let outletWiseTotal = ;
let outletWiseGross = ;
let outletWiseDiscount = ;
let outletWiseGst = ;
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element =>
th = document.createElement("th");
th.colSpan = 4;
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
outletWiseGross[element] = 0;
outletWiseDiscount[element] = 0;
outletWiseGst[element] = 0;
data.forEach(el =>
if (el.outlet == element)
outletWiseTotal[element] += parseInt(el.amount);
outletWiseGross[element] += parseInt(el.gross);
outletWiseDiscount[element] += parseInt(el.discount);
outletWiseGst[element] += parseInt(el.GST);
);
grandTotal += outletWiseTotal[element];
grandGross += outletWiseGross[element];
grandDiscount += outletWiseDiscount[element];
grandGst += outletWiseGst[element];
);
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "";
headerRow.appendChild(th);
for (i = 0; i < outlets.length + 1; i++)
th = document.createElement("th");
th.innerHTML = "Discount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "GST";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Net Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
th = document.createElement("th");
th.innerHTML = "Gross Amount";
th.classList.add("text-center");
headerRow.appendChild(th);
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
headerRow = document.createElement("tr");
td = document.createElement("th");
td.innerHTML = "Total";
td.classList.add("text-center");
headerRow.appendChild(td);
outlets.forEach(element =>
td = document.createElement("th");
td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
td = document.createElement("th");
td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.appendChild(td);
);
td = document.createElement("th");
td.innerHTML = grandTotal.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGst.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandGross.toLocaleString('en-IN');
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element =>
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
let totalGross = 0;
let totalDiscount = 0;
let totalGST = 0;
outlets.forEach(outlet =>
let ta = 0;
let tg = 0;
let tdi = 0;
let tgst = 0;
data.forEach(d =>
if (d.billdate == element && d.outlet == outlet)
total += parseInt(d.amount);
totalGross += parseInt(d.gross);
totalDiscount += parseInt(d.discount);
totalGST += parseInt(d.GST);
ta = d.amount;
tg = d.gross;
tdi = d.discount;
tgst = d.GST;
);
td = document.createElement("td");
td.innerHTML = tg.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tdi.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = tgst.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = ta.toLocaleString('en-IN');
td.classList.add("text-right");
row.appendChild(td);
);
/* console.log("row is : " , row.children ) */
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGST.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalDiscount.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = totalGross.toLocaleString('en-IN');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
tbody.appendChild(row);
);
table.appendChild(tbody);
document.body.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
wrapTable($(table));
let formatedData = formatData(data);
renderTable(formatedData);
function wrapTable($table)
let $tableWrapper = $('<div>').addClass('table-wrapper').insertAfter($table);
let $tableBodyWrapper = $('<div>').addClass('table-body-wrapper').appendTo($tableWrapper);
let $tableWidthTracker = $('<div>').css('width', '100%').appendTo($tableBodyWrapper);
$table.appendTo($tableBodyWrapper);
let $tableHeadWrapper = $('<div>').addClass('table-head-wrapper').width($tableWidthTracker.width()).appendTo($tableWrapper);
let $tableDuplicateHead = $table.clone().find("tbody").remove().end().appendTo($tableHeadWrapper);
let $dupCols = $tableDuplicateHead.find('thead tr:last').children();
$table.find('thead tr:last').children().each(function(i)
$dupCols.eq(i).css('minWidth', $(this).outerWidth());
);
$tableBodyWrapper.on('scroll', function()
$tableHeadWrapper.scrollLeft($tableBodyWrapper.scrollLeft());
);
$(window).on('resize', function()
$tableHeadWrapper.width($tableWidthTracker.width());
);
table.table-bordered>thead>tr>th
border: 1px solid white;
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 9pt;
padding: 5px 5px 5px 5px;
background-color: rgba(29, 150, 178, 1);
font-weight: normal;
text-align: center;
color: white;
table.table-bordered>tbody>tr>td
border: 1px solid rgba(29, 150, 178, 1);
white-space: nowrap;
border-collapse: collapse;
font-family: Verdana;
font-size: 8pt;
background-color: rgba(84, 83, 72, .1);
padding: 5px 5px 5px 5px;
.table-wrapper
position: relative;
margin: 10px;
.table-head-wrapper
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
.table-body-wrapper
height: 70vh;
overflow: auto;
.table-body-wrapper>.table
margin: 0;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<h1>Fixed Header</h1>answered Mar 8 at 21:03
Munim MunnaMunim Munna
10.3k41543
answered Mar 8 at 21:03
Munim MunnaMunim Munna
10.3k41543
answered Mar 8 at 21:03
Munim MunnaMunim Munna
10.3k41543
answered Mar 8 at 21:03
Munim MunnaMunim Munna
10.3k41543
10.3k41543
add a comment |
add a comment |
2
var tableValue = [
"billdate": "2018-08-04",
"SalesType": "Total",
"JAYANAGAR": 518212,
"MALLESHWARAM": 104801,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 508161,
"MALLESHWARAM": 102675,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 10051,
"MALLESHWARAM": 2126,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "2018-08-05",
"SalesType": "Total",
"JAYANAGAR": 628358,
"MALLESHWARAM": 115223,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 608336,
"MALLESHWARAM": 109013,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 20022,
"MALLESHWARAM": 6210,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
]
function addTable(tableValue)
var col = Object.keys(tableValue[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++)
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
for (var i = 0; i < tableValue.length; i++) //table body i.e tbody
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++)
var tabCell = tr.insertCell(-1);
var tabledata = tableValue[i][col[j]];
if (tabledata && !isNaN(tabledata))
tabledata = parseInt(tabledata).toLocaleString('en-in')
if (tableValue[i]['billdate'] != "")
tr.style.backgroundColor = "yellow";
if (tableValue[i]['billdate'] === tableValue[i][col[j]])
tabCell.classList.add("headerColor");
tabCell.innerHTML = tabledata;
if (j > 1)
tabCell.classList.add("text-right");
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A
// CONTAINER.
var divContainer = document.getElementById("salesBreakupTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
addTable(tableValue)<style>
.headerColor
color:red;
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
<table id="salesBreakupTable">
</table>
</div>use just add one condition
if (tableValue[i]['billdate'] != "")
tr.style.backgroundColor = "yellow";
answered Mar 6 at 7:03
Anandhukrishna VRAnandhukrishna VR
4912
hey sir how can i make tbody vertically scroll please help in this also
– manish thakur
Mar 6 at 7:07
this is the table i want to make scroll tbody [jsfiddle.net/d7v5t0sz/]
– manish thakur
Mar 6 at 8:55
jsfiddile page is not available
– Anandhukrishna VR
Mar 6 at 9:30
i am sorry , please check this jsfiddle.net/draj8126/po0fxkse/2
– manish thakur
Mar 6 at 9:49
thead, tbody display: block; tbody height: 100px; /* Just for the demo / overflow-y: auto; / Trigger vertical scroll / overflow-x: auto; / Hide the horizontal scroll */ add this style to your page
– Anandhukrishna VR
Mar 6 at 10:17
|
show 1 more comment
2
var tableValue = [
"billdate": "2018-08-04",
"SalesType": "Total",
"JAYANAGAR": 518212,
"MALLESHWARAM": 104801,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 508161,
"MALLESHWARAM": 102675,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 10051,
"MALLESHWARAM": 2126,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "2018-08-05",
"SalesType": "Total",
"JAYANAGAR": 628358,
"MALLESHWARAM": 115223,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 608336,
"MALLESHWARAM": 109013,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 20022,
"MALLESHWARAM": 6210,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
]
function addTable(tableValue)
var col = Object.keys(tableValue[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++)
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
for (var i = 0; i < tableValue.length; i++) //table body i.e tbody
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++)
var tabCell = tr.insertCell(-1);
var tabledata = tableValue[i][col[j]];
if (tabledata && !isNaN(tabledata))
tabledata = parseInt(tabledata).toLocaleString('en-in')
if (tableValue[i]['billdate'] != "")
tr.style.backgroundColor = "yellow";
if (tableValue[i]['billdate'] === tableValue[i][col[j]])
tabCell.classList.add("headerColor");
tabCell.innerHTML = tabledata;
if (j > 1)
tabCell.classList.add("text-right");
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A
// CONTAINER.
var divContainer = document.getElementById("salesBreakupTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
addTable(tableValue)<style>
.headerColor
color:red;
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
<table id="salesBreakupTable">
</table>
</div>use just add one condition
if (tableValue[i]['billdate'] != "")
tr.style.backgroundColor = "yellow";
answered Mar 6 at 7:03
Anandhukrishna VRAnandhukrishna VR
4912
hey sir how can i make tbody vertically scroll please help in this also
– manish thakur
Mar 6 at 7:07
this is the table i want to make scroll tbody [jsfiddle.net/d7v5t0sz/]
– manish thakur
Mar 6 at 8:55
jsfiddile page is not available
– Anandhukrishna VR
Mar 6 at 9:30
i am sorry , please check this jsfiddle.net/draj8126/po0fxkse/2
– manish thakur
Mar 6 at 9:49
thead, tbody display: block; tbody height: 100px; /* Just for the demo / overflow-y: auto; / Trigger vertical scroll / overflow-x: auto; / Hide the horizontal scroll */ add this style to your page
– Anandhukrishna VR
Mar 6 at 10:17
|
show 1 more comment
2
2
2
var tableValue = [
"billdate": "2018-08-04",
"SalesType": "Total",
"JAYANAGAR": 518212,
"MALLESHWARAM": 104801,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 508161,
"MALLESHWARAM": 102675,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 10051,
"MALLESHWARAM": 2126,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "2018-08-05",
"SalesType": "Total",
"JAYANAGAR": 628358,
"MALLESHWARAM": 115223,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 608336,
"MALLESHWARAM": 109013,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 20022,
"MALLESHWARAM": 6210,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
]
function addTable(tableValue)
var col = Object.keys(tableValue[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++)
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
for (var i = 0; i < tableValue.length; i++) //table body i.e tbody
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++)
var tabCell = tr.insertCell(-1);
var tabledata = tableValue[i][col[j]];
if (tabledata && !isNaN(tabledata))
tabledata = parseInt(tabledata).toLocaleString('en-in')
if (tableValue[i]['billdate'] != "")
tr.style.backgroundColor = "yellow";
if (tableValue[i]['billdate'] === tableValue[i][col[j]])
tabCell.classList.add("headerColor");
tabCell.innerHTML = tabledata;
if (j > 1)
tabCell.classList.add("text-right");
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A
// CONTAINER.
var divContainer = document.getElementById("salesBreakupTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
addTable(tableValue)<style>
.headerColor
color:red;
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
<table id="salesBreakupTable">
</table>
</div>use just add one condition
if (tableValue[i]['billdate'] != "")
tr.style.backgroundColor = "yellow";
answered Mar 6 at 7:03
Anandhukrishna VRAnandhukrishna VR
4912
var tableValue = [
"billdate": "2018-08-04",
"SalesType": "Total",
"JAYANAGAR": 518212,
"MALLESHWARAM": 104801,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 508161,
"MALLESHWARAM": 102675,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 10051,
"MALLESHWARAM": 2126,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "2018-08-05",
"SalesType": "Total",
"JAYANAGAR": 628358,
"MALLESHWARAM": 115223,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 608336,
"MALLESHWARAM": 109013,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 20022,
"MALLESHWARAM": 6210,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
]
function addTable(tableValue)
var col = Object.keys(tableValue[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++)
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
for (var i = 0; i < tableValue.length; i++) //table body i.e tbody
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++)
var tabCell = tr.insertCell(-1);
var tabledata = tableValue[i][col[j]];
if (tabledata && !isNaN(tabledata))
tabledata = parseInt(tabledata).toLocaleString('en-in')
if (tableValue[i]['billdate'] != "")
tr.style.backgroundColor = "yellow";
if (tableValue[i]['billdate'] === tableValue[i][col[j]])
tabCell.classList.add("headerColor");
tabCell.innerHTML = tabledata;
if (j > 1)
tabCell.classList.add("text-right");
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A
// CONTAINER.
var divContainer = document.getElementById("salesBreakupTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
addTable(tableValue)<style>
.headerColor
color:red;
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
<table id="salesBreakupTable">
</table>
</div>use just add one condition
if (tableValue[i]['billdate'] != "")
tr.style.backgroundColor = "yellow";
var tableValue = [
"billdate": "2018-08-04",
"SalesType": "Total",
"JAYANAGAR": 518212,
"MALLESHWARAM": 104801,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 508161,
"MALLESHWARAM": 102675,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 10051,
"MALLESHWARAM": 2126,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "2018-08-05",
"SalesType": "Total",
"JAYANAGAR": 628358,
"MALLESHWARAM": 115223,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 608336,
"MALLESHWARAM": 109013,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 20022,
"MALLESHWARAM": 6210,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
]
function addTable(tableValue)
var col = Object.keys(tableValue[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++)
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
for (var i = 0; i < tableValue.length; i++) //table body i.e tbody
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++)
var tabCell = tr.insertCell(-1);
var tabledata = tableValue[i][col[j]];
if (tabledata && !isNaN(tabledata))
tabledata = parseInt(tabledata).toLocaleString('en-in')
if (tableValue[i]['billdate'] != "")
tr.style.backgroundColor = "yellow";
if (tableValue[i]['billdate'] === tableValue[i][col[j]])
tabCell.classList.add("headerColor");
tabCell.innerHTML = tabledata;
if (j > 1)
tabCell.classList.add("text-right");
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A
// CONTAINER.
var divContainer = document.getElementById("salesBreakupTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
addTable(tableValue)<style>
.headerColor
color:red;
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
<table id="salesBreakupTable">
</table>
</div>var tableValue = [
"billdate": "2018-08-04",
"SalesType": "Total",
"JAYANAGAR": 518212,
"MALLESHWARAM": 104801,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 508161,
"MALLESHWARAM": 102675,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 10051,
"MALLESHWARAM": 2126,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "2018-08-05",
"SalesType": "Total",
"JAYANAGAR": 628358,
"MALLESHWARAM": 115223,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 608336,
"MALLESHWARAM": 109013,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 20022,
"MALLESHWARAM": 6210,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
]
function addTable(tableValue)
var col = Object.keys(tableValue[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++)
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
for (var i = 0; i < tableValue.length; i++) //table body i.e tbody
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++)
var tabCell = tr.insertCell(-1);
var tabledata = tableValue[i][col[j]];
if (tabledata && !isNaN(tabledata))
tabledata = parseInt(tabledata).toLocaleString('en-in')
if (tableValue[i]['billdate'] != "")
tr.style.backgroundColor = "yellow";
if (tableValue[i]['billdate'] === tableValue[i][col[j]])
tabCell.classList.add("headerColor");
tabCell.innerHTML = tabledata;
if (j > 1)
tabCell.classList.add("text-right");
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A
// CONTAINER.
var divContainer = document.getElementById("salesBreakupTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
addTable(tableValue)<style>
.headerColor
color:red;
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
<table id="salesBreakupTable">
</table>
</div>answered Mar 6 at 7:03
Anandhukrishna VRAnandhukrishna VR
4912
answered Mar 6 at 7:03
Anandhukrishna VRAnandhukrishna VR
4912
answered Mar 6 at 7:03
Anandhukrishna VRAnandhukrishna VR
4912
answered Mar 6 at 7:03
Anandhukrishna VRAnandhukrishna VR
4912
4912
hey sir how can i make tbody vertically scroll please help in this also
– manish thakur
Mar 6 at 7:07
this is the table i want to make scroll tbody [jsfiddle.net/d7v5t0sz/]
– manish thakur
Mar 6 at 8:55
jsfiddile page is not available
– Anandhukrishna VR
Mar 6 at 9:30
i am sorry , please check this jsfiddle.net/draj8126/po0fxkse/2
– manish thakur
Mar 6 at 9:49
thead, tbody display: block; tbody height: 100px; /* Just for the demo / overflow-y: auto; / Trigger vertical scroll / overflow-x: auto; / Hide the horizontal scroll */ add this style to your page
– Anandhukrishna VR
Mar 6 at 10:17
|
show 1 more comment
hey sir how can i make tbody vertically scroll please help in this also
– manish thakur
Mar 6 at 7:07
this is the table i want to make scroll tbody [jsfiddle.net/d7v5t0sz/]
– manish thakur
Mar 6 at 8:55
jsfiddile page is not available
– Anandhukrishna VR
Mar 6 at 9:30
i am sorry , please check this jsfiddle.net/draj8126/po0fxkse/2
– manish thakur
Mar 6 at 9:49
thead, tbody display: block; tbody height: 100px; /* Just for the demo / overflow-y: auto; / Trigger vertical scroll / overflow-x: auto; / Hide the horizontal scroll */ add this style to your page
– Anandhukrishna VR
Mar 6 at 10:17
hey sir how can i make tbody vertically scroll please help in this also
– manish thakur
Mar 6 at 7:07
hey sir how can i make tbody vertically scroll please help in this also
– manish thakur
Mar 6 at 7:07
this is the table i want to make scroll tbody [jsfiddle.net/d7v5t0sz/]
– manish thakur
Mar 6 at 8:55
this is the table i want to make scroll tbody [jsfiddle.net/d7v5t0sz/]
– manish thakur
Mar 6 at 8:55
jsfiddile page is not available
– Anandhukrishna VR
Mar 6 at 9:30
jsfiddile page is not available
– Anandhukrishna VR
Mar 6 at 9:30
i am sorry , please check this jsfiddle.net/draj8126/po0fxkse/2
– manish thakur
Mar 6 at 9:49
i am sorry , please check this jsfiddle.net/draj8126/po0fxkse/2
– manish thakur
Mar 6 at 9:49
thead, tbody display: block; tbody height: 100px; /* Just for the demo / overflow-y: auto; / Trigger vertical scroll / overflow-x: auto; / Hide the horizontal scroll */ add this style to your page
– Anandhukrishna VR
Mar 6 at 10:17
thead, tbody display: block; tbody height: 100px; /* Just for the demo / overflow-y: auto; / Trigger vertical scroll / overflow-x: auto; / Hide the horizontal scroll */ add this style to your page
– Anandhukrishna VR
Mar 6 at 10:17
|
show 1 more comment
2
You can try the following code or you can use DataTable js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<style>
.headerColor
color:red;
#salesBreakupTable thead, #salesBreakupTable tbody
display: block;
#salesBreakupTable tbody
height: 300px;
overflow: auto;
#salesBreakupTable tr
position: relative;
width: 100%;
display: flex;
#salesBreakupTable tr td, #salesBreakupTable tr th
flex: 1;
width: 200px;
flex-shrink: 0;
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table id="salesBreakupTable">
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var tableValue = [
"billdate": "2018-08-04",
"SalesType": "Total",
"JAYANAGAR": 518212,
"MALLESHWARAM": 104801,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 508161,
"MALLESHWARAM": 102675,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 10051,
"MALLESHWARAM": 2126,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "2018-08-05",
"SalesType": "Total",
"JAYANAGAR": 628358,
"MALLESHWARAM": 115223,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 608336,
"MALLESHWARAM": 109013,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 20022,
"MALLESHWARAM": 6210,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
];
function addTable(data)
var tableHeader = "<thead><tr>";
var tableBody = "<tbody>";
$.each(data,function(i,v)
if (v['billdate'])
tableBody += "<tr class='headerColor'>";
else
tableBody += "<tr>";
$.each(v,function(d,a)
if (i == 0)
tableHeader += "<th>"+d+"</th>";
tableBody += "<td>"+a+"</td>";
);
tableBody += "</tr>";
);
tableHeader += "</tr></thead>";
tableBody += "</tbody>";
$("#salesBreakupTable").addClass("table table-striped table-bordered table-hover").html(tableHeader+tableBody);
addTable(tableValue);
</script>
</body>
</html>
answered Mar 6 at 8:18
Mahmoud SalemMahmoud Salem
814
hey actually my table design is different so i can't use datatable
– manish thakur
Mar 6 at 8:23
Did you try the above code using Jquery Only?
– Mahmoud Salem
Mar 6 at 8:28
please try this link this is the table i am trying to scroll vertically [jsfiddle.net/d7v5t0sz/]
– manish thakur
Mar 6 at 8:32
try the updated code
– Mahmoud Salem
Mar 6 at 9:01
add a comment |
2
You can try the following code or you can use DataTable js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<style>
.headerColor
color:red;
#salesBreakupTable thead, #salesBreakupTable tbody
display: block;
#salesBreakupTable tbody
height: 300px;
overflow: auto;
#salesBreakupTable tr
position: relative;
width: 100%;
display: flex;
#salesBreakupTable tr td, #salesBreakupTable tr th
flex: 1;
width: 200px;
flex-shrink: 0;
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table id="salesBreakupTable">
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var tableValue = [
"billdate": "2018-08-04",
"SalesType": "Total",
"JAYANAGAR": 518212,
"MALLESHWARAM": 104801,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 508161,
"MALLESHWARAM": 102675,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 10051,
"MALLESHWARAM": 2126,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "2018-08-05",
"SalesType": "Total",
"JAYANAGAR": 628358,
"MALLESHWARAM": 115223,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 608336,
"MALLESHWARAM": 109013,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 20022,
"MALLESHWARAM": 6210,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
];
function addTable(data)
var tableHeader = "<thead><tr>";
var tableBody = "<tbody>";
$.each(data,function(i,v)
if (v['billdate'])
tableBody += "<tr class='headerColor'>";
else
tableBody += "<tr>";
$.each(v,function(d,a)
if (i == 0)
tableHeader += "<th>"+d+"</th>";
tableBody += "<td>"+a+"</td>";
);
tableBody += "</tr>";
);
tableHeader += "</tr></thead>";
tableBody += "</tbody>";
$("#salesBreakupTable").addClass("table table-striped table-bordered table-hover").html(tableHeader+tableBody);
addTable(tableValue);
</script>
</body>
</html>
answered Mar 6 at 8:18
Mahmoud SalemMahmoud Salem
814
hey actually my table design is different so i can't use datatable
– manish thakur
Mar 6 at 8:23
Did you try the above code using Jquery Only?
– Mahmoud Salem
Mar 6 at 8:28
please try this link this is the table i am trying to scroll vertically [jsfiddle.net/d7v5t0sz/]
– manish thakur
Mar 6 at 8:32
try the updated code
– Mahmoud Salem
Mar 6 at 9:01
add a comment |
2
2
2
You can try the following code or you can use DataTable js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<style>
.headerColor
color:red;
#salesBreakupTable thead, #salesBreakupTable tbody
display: block;
#salesBreakupTable tbody
height: 300px;
overflow: auto;
#salesBreakupTable tr
position: relative;
width: 100%;
display: flex;
#salesBreakupTable tr td, #salesBreakupTable tr th
flex: 1;
width: 200px;
flex-shrink: 0;
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table id="salesBreakupTable">
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var tableValue = [
"billdate": "2018-08-04",
"SalesType": "Total",
"JAYANAGAR": 518212,
"MALLESHWARAM": 104801,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 508161,
"MALLESHWARAM": 102675,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 10051,
"MALLESHWARAM": 2126,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "2018-08-05",
"SalesType": "Total",
"JAYANAGAR": 628358,
"MALLESHWARAM": 115223,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 608336,
"MALLESHWARAM": 109013,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 20022,
"MALLESHWARAM": 6210,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
];
function addTable(data)
var tableHeader = "<thead><tr>";
var tableBody = "<tbody>";
$.each(data,function(i,v)
if (v['billdate'])
tableBody += "<tr class='headerColor'>";
else
tableBody += "<tr>";
$.each(v,function(d,a)
if (i == 0)
tableHeader += "<th>"+d+"</th>";
tableBody += "<td>"+a+"</td>";
);
tableBody += "</tr>";
);
tableHeader += "</tr></thead>";
tableBody += "</tbody>";
$("#salesBreakupTable").addClass("table table-striped table-bordered table-hover").html(tableHeader+tableBody);
addTable(tableValue);
</script>
</body>
</html>
answered Mar 6 at 8:18
Mahmoud SalemMahmoud Salem
814
You can try the following code or you can use DataTable js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<style>
.headerColor
color:red;
#salesBreakupTable thead, #salesBreakupTable tbody
display: block;
#salesBreakupTable tbody
height: 300px;
overflow: auto;
#salesBreakupTable tr
position: relative;
width: 100%;
display: flex;
#salesBreakupTable tr td, #salesBreakupTable tr th
flex: 1;
width: 200px;
flex-shrink: 0;
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table id="salesBreakupTable">
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var tableValue = [
"billdate": "2018-08-04",
"SalesType": "Total",
"JAYANAGAR": 518212,
"MALLESHWARAM": 104801,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 508161,
"MALLESHWARAM": 102675,
"KOLAR": 138151
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 10051,
"MALLESHWARAM": 2126,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "2018-08-05",
"SalesType": "Total",
"JAYANAGAR": 628358,
"MALLESHWARAM": 115223,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "cash",
"JAYANAGAR": 608336,
"MALLESHWARAM": 109013,
"KOLAR": 134107
,
"billdate": "",
"SalesType": "creditcard",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "coupon",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "paytm",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "credit",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "swiggy",
"JAYANAGAR": 20022,
"MALLESHWARAM": 6210,
"KOLAR": 0
,
"billdate": "",
"SalesType": "kb",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "bigbasket",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
,
"billdate": "",
"SalesType": "zomato",
"JAYANAGAR": 0,
"MALLESHWARAM": 0,
"KOLAR": 0
];
function addTable(data)
var tableHeader = "<thead><tr>";
var tableBody = "<tbody>";
$.each(data,function(i,v)
if (v['billdate'])
tableBody += "<tr class='headerColor'>";
else
tableBody += "<tr>";
$.each(v,function(d,a)
if (i == 0)
tableHeader += "<th>"+d+"</th>";
tableBody += "<td>"+a+"</td>";
);
tableBody += "</tr>";
);
tableHeader += "</tr></thead>";
tableBody += "</tbody>";
$("#salesBreakupTable").addClass("table table-striped table-bordered table-hover").html(tableHeader+tableBody);
addTable(tableValue);
</script>
</body>
</html>
answered Mar 6 at 8:18
Mahmoud SalemMahmoud Salem
814
edited Mar 6 at 9:01
answered Mar 6 at 8:18
Mahmoud SalemMahmoud Salem
814
answered Mar 6 at 8:18
Mahmoud SalemMahmoud Salem
814
answered Mar 6 at 8:18
Mahmoud SalemMahmoud Salem
814
814
hey actually my table design is different so i can't use datatable
– manish thakur
Mar 6 at 8:23
Did you try the above code using Jquery Only?
– Mahmoud Salem
Mar 6 at 8:28
please try this link this is the table i am trying to scroll vertically [jsfiddle.net/d7v5t0sz/]
– manish thakur
Mar 6 at 8:32
try the updated code
– Mahmoud Salem
Mar 6 at 9:01
add a comment |
hey actually my table design is different so i can't use datatable
– manish thakur
Mar 6 at 8:23
Did you try the above code using Jquery Only?
– Mahmoud Salem
Mar 6 at 8:28
please try this link this is the table i am trying to scroll vertically [jsfiddle.net/d7v5t0sz/]
– manish thakur
Mar 6 at 8:32
try the updated code
– Mahmoud Salem
Mar 6 at 9:01
hey actually my table design is different so i can't use datatable
– manish thakur
Mar 6 at 8:23
hey actually my table design is different so i can't use datatable
– manish thakur
Mar 6 at 8:23
Did you try the above code using Jquery Only?
– Mahmoud Salem
Mar 6 at 8:28
Did you try the above code using Jquery Only?
– Mahmoud Salem
Mar 6 at 8:28
please try this link this is the table i am trying to scroll vertically [jsfiddle.net/d7v5t0sz/]
– manish thakur
Mar 6 at 8:32
please try this link this is the table i am trying to scroll vertically [jsfiddle.net/d7v5t0sz/]
– manish thakur
Mar 6 at 8:32
try the updated code
– Mahmoud Salem
Mar 6 at 9:01
try the updated code
– Mahmoud Salem
Mar 6 at 9:01
add a comment |
2
The idea is to put the table in a div, while setting overflow hidden on the div and overflow auto for the table body. This can be done with pure css and html. Check out this fix.
answered Mar 13 at 9:34
BogdanBogdan
7917
add a comment |
2
The idea is to put the table in a div, while setting overflow hidden on the div and overflow auto for the table body. This can be done with pure css and html. Check out this fix.
answered Mar 13 at 9:34
BogdanBogdan
7917
add a comment |
2
2
2
The idea is to put the table in a div, while setting overflow hidden on the div and overflow auto for the table body. This can be done with pure css and html. Check out this fix.
answered Mar 13 at 9:34
BogdanBogdan
7917
The idea is to put the table in a div, while setting overflow hidden on the div and overflow auto for the table body. This can be done with pure css and html. Check out this fix.
answered Mar 13 at 9:34
BogdanBogdan
7917
answered Mar 13 at 9:34
BogdanBogdan
7917
answered Mar 13 at 9:34
BogdanBogdan
7917
answered Mar 13 at 9:34
BogdanBogdan
7917
7917
add a comment |
add a comment |
0
Try to replace this if block :
if (tableValue[i]['billdate'] === tableValue[i][col[j]])
tabCell.classList.add("headerColor"); // here i am checking if tableValue===billdate then giving it a class to do some css to it
With :
if ((tableValue[i]['billdate'] === tableValue[i][col[j]]) && (tableValue[i][col[j]]).length != 0 ) // added empty cell filter so empty cells will not get the headerColor class
tabCell.classList.add("headerColor"); // here i am checking if tableValue===billdate then giving it a class to do some css to it
And then apply this style :
.headerColor,.headerColor ~ td
background-color:red;
color: white;
table#salesBreakupTable thead, table#salesBreakupTable tbody display: block;
table#salesBreakupTable tbody
height: 280px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
answered Mar 6 at 7:34
support.x1support.x1
513
hey can i fit heightdynamically so that if it increases with screen size it should scroll automatically and also full table is scrolling not tbody
– manish thakur
Mar 6 at 7:43
@manishthakur Yes you can, try for exampleheight: 100vh;to get a full vertical size table
– support.x1
Mar 6 at 7:46
hight:100vh; is working but when there is less data which is less then screen length it showsup lines by default
– manish thakur
Mar 6 at 7:50
just change tomax-height:100vh;then ;)
– support.x1
Mar 6 at 7:59
hey you there ?
– manish thakur
Mar 6 at 8:13
|
show 4 more comments
0
Try to replace this if block :
if (tableValue[i]['billdate'] === tableValue[i][col[j]])
tabCell.classList.add("headerColor"); // here i am checking if tableValue===billdate then giving it a class to do some css to it
With :
if ((tableValue[i]['billdate'] === tableValue[i][col[j]]) && (tableValue[i][col[j]]).length != 0 ) // added empty cell filter so empty cells will not get the headerColor class
tabCell.classList.add("headerColor"); // here i am checking if tableValue===billdate then giving it a class to do some css to it
And then apply this style :
.headerColor,.headerColor ~ td
background-color:red;
color: white;
table#salesBreakupTable thead, table#salesBreakupTable tbody display: block;
table#salesBreakupTable tbody
height: 280px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
answered Mar 6 at 7:34
support.x1support.x1
513
hey can i fit heightdynamically so that if it increases with screen size it should scroll automatically and also full table is scrolling not tbody
– manish thakur
Mar 6 at 7:43
@manishthakur Yes you can, try for exampleheight: 100vh;to get a full vertical size table
– support.x1
Mar 6 at 7:46
hight:100vh; is working but when there is less data which is less then screen length it showsup lines by default
– manish thakur
Mar 6 at 7:50
just change tomax-height:100vh;then ;)
– support.x1
Mar 6 at 7:59
hey you there ?
– manish thakur
Mar 6 at 8:13
|
show 4 more comments
0
0
0
Try to replace this if block :
if (tableValue[i]['billdate'] === tableValue[i][col[j]])
tabCell.classList.add("headerColor"); // here i am checking if tableValue===billdate then giving it a class to do some css to it
With :
if ((tableValue[i]['billdate'] === tableValue[i][col[j]]) && (tableValue[i][col[j]]).length != 0 ) // added empty cell filter so empty cells will not get the headerColor class
tabCell.classList.add("headerColor"); // here i am checking if tableValue===billdate then giving it a class to do some css to it
And then apply this style :
.headerColor,.headerColor ~ td
background-color:red;
color: white;
table#salesBreakupTable thead, table#salesBreakupTable tbody display: block;
table#salesBreakupTable tbody
height: 280px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
answered Mar 6 at 7:34
support.x1support.x1
513
Try to replace this if block :
if (tableValue[i]['billdate'] === tableValue[i][col[j]])
tabCell.classList.add("headerColor"); // here i am checking if tableValue===billdate then giving it a class to do some css to it
With :
if ((tableValue[i]['billdate'] === tableValue[i][col[j]]) && (tableValue[i][col[j]]).length != 0 ) // added empty cell filter so empty cells will not get the headerColor class
tabCell.classList.add("headerColor"); // here i am checking if tableValue===billdate then giving it a class to do some css to it
And then apply this style :
.headerColor,.headerColor ~ td
background-color:red;
color: white;
table#salesBreakupTable thead, table#salesBreakupTable tbody display: block;
table#salesBreakupTable tbody
height: 280px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
answered Mar 6 at 7:34
support.x1support.x1
513
answered Mar 6 at 7:34
support.x1support.x1
513
answered Mar 6 at 7:34
support.x1support.x1
513
answered Mar 6 at 7:34
support.x1support.x1
513
513
hey can i fit heightdynamically so that if it increases with screen size it should scroll automatically and also full table is scrolling not tbody
– manish thakur
Mar 6 at 7:43
@manishthakur Yes you can, try for exampleheight: 100vh;to get a full vertical size table
– support.x1
Mar 6 at 7:46
hight:100vh; is working but when there is less data which is less then screen length it showsup lines by default
– manish thakur
Mar 6 at 7:50
just change tomax-height:100vh;then ;)
– support.x1
Mar 6 at 7:59
hey you there ?
– manish thakur
Mar 6 at 8:13
|
show 4 more comments
hey can i fit heightdynamically so that if it increases with screen size it should scroll automatically and also full table is scrolling not tbody
– manish thakur
Mar 6 at 7:43
@manishthakur Yes you can, try for exampleheight: 100vh;to get a full vertical size table
– support.x1
Mar 6 at 7:46
hight:100vh; is working but when there is less data which is less then screen length it showsup lines by default
– manish thakur
Mar 6 at 7:50
just change tomax-height:100vh;then ;)
– support.x1
Mar 6 at 7:59
hey you there ?
– manish thakur
Mar 6 at 8:13
hey can i fit heightdynamically so that if it increases with screen size it should scroll automatically and also full table is scrolling not tbody
– manish thakur
Mar 6 at 7:43
hey can i fit heightdynamically so that if it increases with screen size it should scroll automatically and also full table is scrolling not tbody
– manish thakur
Mar 6 at 7:43
@manishthakur Yes you can, try for example
height: 100vh; to get a full vertical size table– support.x1
Mar 6 at 7:46
@manishthakur Yes you can, try for example
height: 100vh; to get a full vertical size table– support.x1
Mar 6 at 7:46
hight:100vh; is working but when there is less data which is less then screen length it showsup lines by default
– manish thakur
Mar 6 at 7:50
hight:100vh; is working but when there is less data which is less then screen length it showsup lines by default
– manish thakur
Mar 6 at 7:50
just change to
max-height:100vh; then ;)– support.x1
Mar 6 at 7:59
just change to
max-height:100vh; then ;)– support.x1
Mar 6 at 7:59
hey you there ?
– manish thakur
Mar 6 at 8:13
hey you there ?
– manish thakur
Mar 6 at 8:13
|
show 4 more comments
0
Use DataTable js instead of this, So DataTable js give more table functionalities
Here DataTable colour adding example
$('#example').dataTable(
"createdRow": function( row, data, dataIndex)
if(data[2] == `someVal`)
$(row).addClass('redClass');
);
sample url : click here
DataTable refernce click here
edited Mar 8 at 8:42
cbaconnier
1,3291925
answered Mar 6 at 6:43
Anandhukrishna VRAnandhukrishna VR
4912
1
i am not allowd to use that,thats why trying to do with css only..if you can help me here then it will be helpful for me please
– manish thakur
Mar 6 at 6:44
add a comment |
0
Use DataTable js instead of this, So DataTable js give more table functionalities
Here DataTable colour adding example
$('#example').dataTable(
"createdRow": function( row, data, dataIndex)
if(data[2] == `someVal`)
$(row).addClass('redClass');
);
sample url : click here
DataTable refernce click here
edited Mar 8 at 8:42
cbaconnier
1,3291925
answered Mar 6 at 6:43
Anandhukrishna VRAnandhukrishna VR
4912
1
i am not allowd to use that,thats why trying to do with css only..if you can help me here then it will be helpful for me please
– manish thakur
Mar 6 at 6:44
add a comment |
0
0
0
Use DataTable js instead of this, So DataTable js give more table functionalities
Here DataTable colour adding example
$('#example').dataTable(
"createdRow": function( row, data, dataIndex)
if(data[2] == `someVal`)
$(row).addClass('redClass');
);
sample url : click here
DataTable refernce click here
edited Mar 8 at 8:42
cbaconnier
1,3291925
answered Mar 6 at 6:43
Anandhukrishna VRAnandhukrishna VR
4912
Use DataTable js instead of this, So DataTable js give more table functionalities
Here DataTable colour adding example
$('#example').dataTable(
"createdRow": function( row, data, dataIndex)
if(data[2] == `someVal`)
$(row).addClass('redClass');
);
sample url : click here
DataTable refernce click here
edited Mar 8 at 8:42
cbaconnier
1,3291925
answered Mar 6 at 6:43
Anandhukrishna VRAnandhukrishna VR
4912
edited Mar 8 at 8:42
cbaconnier
1,3291925
edited Mar 8 at 8:42
cbaconnier
1,3291925
edited Mar 8 at 8:42
cbaconnier
1,3291925
1,3291925
answered Mar 6 at 6:43
Anandhukrishna VRAnandhukrishna VR
4912
answered Mar 6 at 6:43
Anandhukrishna VRAnandhukrishna VR
4912
answered Mar 6 at 6:43
Anandhukrishna VRAnandhukrishna VR
4912
4912
1
i am not allowd to use that,thats why trying to do with css only..if you can help me here then it will be helpful for me please
– manish thakur
Mar 6 at 6:44
add a comment |
1
i am not allowd to use that,thats why trying to do with css only..if you can help me here then it will be helpful for me please
– manish thakur
Mar 6 at 6:44
1
1
i am not allowd to use that,thats why trying to do with css only..if you can help me here then it will be helpful for me please
– manish thakur
Mar 6 at 6:44
i am not allowd to use that,thats why trying to do with css only..if you can help me here then it will be helpful for me please
– manish thakur
Mar 6 at 6:44
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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%2f55016859%2fhow-to-make-tbody-of-html-table-scroll-vertically%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
take a look at this codepen.io/nirmalkc/pen/oswdB
– Gagan Deep
Mar 8 at 7:05
@GaganDeep i have already tried this one ,,this squeezes the tbody,i have search alot ongoogle,after that i have putted the post,my table is dynamic i can't give width because it can change on user basis
– manish thakur
Mar 8 at 7:09
@MunimMunna yup somthing like that but header should be fixed
– manish thakur
Mar 8 at 8:56
1
Fixed header with datatables: horizontal scroll only. horizontal+vertical scroll.
– Munim Munna
Mar 8 at 12:19
@MunimMunna hey yup you are correct,but one issue is there how can i give dynamic height,like for any device it should take screen size only
– manish thakur
Mar 8 at 12:33