I am working on Data-tables i have a JSON data from which i am creating a HTML table. I have some requirements for that i am using data-tables what my issue is i am using data-table fixed-columns to fix my column but the table is not rendering correctly it is showing up like 
I am not able to find the issue,why it is showing up like this,I have googled a lot but didn't found any help
function format(number, decimals = 2, locale = 'en-in') {
const fixed = parseInt(number).toFixed(decimals);
const [int, dec] = fixed.split('.')
const intFormatted = (+int).toLocaleString(locale)
return intFormatted + (dec ? '.' + dec : '');
}
var data = [{
"amount": 137551,
"billdate": "2018-12-01",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 130832,
"billdate": "2018-12-02",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 84501,
"billdate": "2018-12-03",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 81938,
"billdate": "2018-12-04",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 104634,
"billdate": "2018-12-05",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 95217,
"billdate": "2018-12-06",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 114856,
"billdate": "2018-12-07",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 104277,
"billdate": "2018-12-08",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 104180,
"billdate": "2018-12-09",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 76160,
"billdate": "2018-12-10",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 94503,
"billdate": "2018-12-11",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 87724,
"billdate": "2018-12-12",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 146463,
"billdate": "2018-12-13",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 150194,
"billdate": "2018-12-14",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 100765,
"billdate": "2018-12-15",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 96188,
"billdate": "2018-12-16",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 94390,
"billdate": "2018-12-17",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 105079,
"billdate": "2018-12-18",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 133846,
"billdate": "2018-12-19",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 151600,
"billdate": "2018-12-20",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 190293,
"billdate": "2018-12-21",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 100150,
"billdate": "2018-12-22",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 68592,
"billdate": "2018-12-23",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 128454,
"billdate": "2018-12-24",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 138538,
"billdate": "2018-12-25",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 78394,
"billdate": "2018-12-26",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 82636,
"billdate": "2018-12-27",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 70039,
"billdate": "2018-12-28",
"outlet": "CHEF BAKERS BROOKFIELD"
},
{
"amount": 62300,
"billdate": "2018-12-29",
"outlet": "CHEF BAKERS BROOKFIELD"
}
]
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("tblOlSalesSummary");
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 outletWiseTotal = {};
th = document.createElement("th");
th.innerHTML = "Totals";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = element;
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
data.forEach(el => {
if (el.outlet == element) {
outletWiseTotal[element] += parseInt(el.amount);
}
});
grandTotal += outletWiseTotal[element];
});
thead.appendChild(headerRow);
headerRow = document.createElement("tr");
th = document.createElement("th");
th.innerHTML = "Total";
th.classList.add("text-center");
headerRow.appendChild(th);
outlets.forEach(element => {
th = document.createElement("th");
th.innerHTML = outletWiseTotal[element].toLocaleString('en-in');
th.classList.add("text-right");
headerRow.appendChild(th);
});
th = document.createElement("th");
th.innerHTML = grandTotal.toLocaleString('en-in');
th.classList.add("text-right");
headerRow.insertBefore(th, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
billdates.forEach(element => {
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element;
row.appendChild(td);
let total = 0;
outlets.forEach(outlet => {
let el = 0;
data.forEach(d => {
if (d.billdate == element && d.outlet == outlet) {
total += parseInt(d.amount);
el = d.amount;
}
});
td = document.createElement("td");
td.innerHTML = el.toLocaleString('en-in');
td.classList.add("text-right");
row.appendChild(td);
});
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-in');
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
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");
$(table).DataTable({
"scrollX": true,
"scrollY": "200px",
"bScrollCollapse": true,
"paging": false,
"info": false,
"ordering": false,
"searching": false,
fixedColumns: {
leftColumns: 2,
}
}).columns.adjust().draw();
}
let formatedData = formatData(data);
renderTable(formatedData);
div.dataTables_wrapper {
width: 100%;
margin: 0 auto;
}
.DTFC_LeftBodyLiner {
overflow-x:hidden
}
.table.DTFC_Cloned {
background-color: #fff;
}
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;
color: black;
}
<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">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/fc-3.2.5/fh-3.1.4/datatables.min.js"></script>
<div id="tblOlSalesSummary" class="table table-responsive"></div>
Edit/Update
As per guided by @DeclanMcD to remove the the css CDN of data-table to get the desire look i am looking for,but i don't think removing CSS CDN od data-table is good idea. as you all can check 
i am fixing 3 columns of my table their alignment is not perfect which will be not good user experience
- When i am adding data-table css cdn to my code then it is coming like above before edit
- I don't know how to fix this one as it is creating lots of issue for me
from HTML table Misaligned rows in Fixed columns
No comments:
Post a Comment