【发布时间】：2019-09-17 19:18:05
【问题描述】：
我正在处理数据表我有一个 JSON 数据，我正在创建一个 HTML 表。
我有一些要求，我正在使用数据表我的问题是我正在使用数据表固定列来修复我的列，但表没有正确呈现它显示如下：
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>按照 DeclanMcD 的指导，删除数据表的 CSS CDN 以获得我正在寻找的期望外观，但我不认为删除 CSS CDN od 数据表是个好主意。大家可以查看我正在修复我的表格的 3 列，它们的对齐方式并不完美，这不会是良好的用户体验
当我将数据表 CSS cdn 添加到我的代码中时，它在编辑之前就像上面一样。我不知道如何解决这个问题，因为它给我带来了很多问题
我可以使用纯 CSS 实现这一点吗？
【问题讨论】：
-
请注意，我们更喜欢这里的技术写作风格。我们轻轻地劝阻问候，希望你能帮助，谢谢，提前感谢，感谢信，问候，亲切的问候，签名，请你能帮助，聊天材料和缩写 txtspk，恳求，你多久了被卡住、投票建议、元评论等。只需解释您的问题，并展示您尝试过的内容、预期的内容以及实际发生的情况。
标签： javascript jquery css datatables