修复了使用Data-table无法工作的列 [英] Fixed column not working using Data-table
本文介绍了修复了使用Data-table无法工作的列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在处理数据表我有一个JSON数据，我正在创建一个HTML表。
我有一些要求，我正在使用数据表我的问题是我使用数据表固定列来修复我的列，但表没有正确呈现它显示像
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>
编辑/更新
按照<$ c的指导$ c> @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添加到我的代码中时，它在编辑之前就像上面一样
- 我不知道如何解决这个问题，因为它是为我创造了很多问题
编辑
- 我可以使用纯css实现这一点吗我已经google了很多并找到了一些解决方案但是当它们与我的css混合使用时它们无法正常工作
- 如果可以的话由纯css完成然后它会使我的工作变得简单
- 请有人在这里帮助我
推荐答案
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.
要解决此问题： -
To fix this issue :-
- 转到 datatables CDN 页面。
- 找到名为样式选项的部分，然后单击 Bootstrap 4 按钮。
- 将引用的数据表CSS替换为 DataTables 部分中提供的引导程序4。
- 在HTML中添加另一个CSS文件，该文件位于 Extensions - > 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_L eftBodyLiner {
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.
这篇关于修复了使用Data-table无法工作的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
