为什么固定列不能使用数据表工作? [英] Why isn't fixed column working using Data-table?
问题描述
我正在处理数据表，我有一个JSON数据，我正在从中创建HTML表.
I am working on Data-tables I have a JSON data from which I am creating an 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:
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列，它们的对齐方式不是完美的，这将不是良好的用户体验
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
当我将数据表CSS CDN添加到我的代码中时，它就像上面编辑之前一样.我不知道该如何解决这个问题，因为它给我带来了很多问题
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
我可以使用纯CSS来实现这一点吗?我已经在Google上搜索了很多，找到了一些解决方案，但是当将它们与CSS混合使用时，它们将无法正常工作
Can I achieve that using pure CSS I have Googled a lot and found some solutions but when mixing them with my CSS they are not working
推荐答案
HTML中存在两个问题.您错过了加载FixedColumns扩展所需的样式表.并且您已经加载了默认数据表的样式表，该样式表无法与bootstrap 4的样式一起正常工作.
There are two issues in your HTML. You have missed loading the stylesheet required by the FixedColumns extension. And you have loaded the default datatable's stylesheet which will not work correctly with bootstrap 4's styles.
要解决此问题:-
- 转到数据表CDN 页.
- 找到一个名为样式选项的部分，然后单击 Bootstrap 4 按钮.
- 用引导程序4替换您引用的数据表CSS，该引导程序在 DataTables 部分中可用.
- 将另一个CSS文件添加到HTML中，该文件位于扩展-> FixedColumns 部分中.
- Go to the datatables CDN page.
- Find a section named Styling options and click on Bootstrap 4 button.
- Replace your referenced datatables CSS with the bootstrap 4 one available in DataTables section.
- Add another CSS file to your HTML which is present inside Extensions -> FixedColumns section.
您可以检查此小提琴，在应用了修复.
You can check this fiddle where your code is now working as intended after applying the fixes.
加载正确的样式表后，以下CSS也将不再是必需的:-
After loading the correct stylesheets, the following CSS will also become unnecessary :-
.DTFC_LeftBodyLiner {
overflow-x:hidden
}
.DTFC_LeftBodyLiner {
overflow-x:hidden
}
固定列上出现了溢出滚动条，这是因为首先加载了错误的CSS，这可能提示您添加这些样式以隐藏滚动条.
An overflow scrollbar was appearing on the fixed columns only because incorrect CSS was loaded in the first place, which might have prompted you to add those styles to hide the scrollbar.
这篇关于为什么固定列不能使用数据表工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
