固定列无法使用数据表

时间：2019-04-29 07:26:13

标签： javascript jquery css3 datatables

我正在处理数据表，我有一个JSON数据，我正在从中创建HTML表。

我对使用数据表有一些要求，我的问题是我正在使用数据表固定列修复我的列，但表显示不正确，显示如下：

this 

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数据表不是一个好主意。大家都可以检查here，我正在修复表的3列，它们的对齐方式不是完美的，这将不是良好的用户体验

当我将数据表CSS CDN添加到我的代码中时，它就像上面编辑之前一样。我不知道如何解决这个问题，因为它给我带来了很多问题

  • 我可以使用纯CSS来实现这一点吗？我已经在Google上搜索了很多，找到了一些解决方案，但是当将它们与CSS混合使用时，它们是行不通的

3 个答案:

答案 0 :(得分：3)

HTML中存在两个问题。您错过了加载FixedColumns扩展所需的样式表的机会。并且您已经加载了默认数据表的样式表，该样式表无法与bootstrap 4的样式一起正常工作。

要解决此问题：-

  1. 转到datatables CDN页。
  2. 找到一个名为样式选项的部分，然后单击 Bootstrap 4 按钮。
  3. 用 DataTables 部分中可用的引导程序4替换您引用的数据表CSS。
  4. 将另一个CSS文件添加到HTML中，该文件位于扩展-> FixedColumns 部分中。

在应用修补程序后，您可以检查this fiddle现在代码在哪里可以正常工作。

加载正确的样式表后，以下CSS也将不再需要：-

.DTFC_LeftBodyLiner { overflow-x:hidden }

固定列上出现了溢出滚动条，这是因为首先加载了错误的CSS，这可能提示您添加这些样式以隐藏滚动条。

答案 1 :(得分：2)

我已将您的代码复制到小提琴中

View the fiddle here

您尚未说出它的外观，但我已经删除了CSS文件

<!--
<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
-->

它似乎按预期显示了吗？

更新：我添加了以下样式来修复出现的多余空间。它还解决了列滚动问题。

.table {
    margin-bottom: 0 !important;
}

立即查看小提琴。

答案 2 :(得分：0)

我在您的代码中添加了以下CSS。数据表划分的宽度不应以像素为单位。

#DataTables_Table_0, .DataTables_scrollHeadInnner, .dataTable {width:100% !important;}


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;
   
}

#DataTables_Table_0, .dataTables_scrollHeadInner, .dataTable  {
  width:100% !important;
}
<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>

相关问题
最新问题