Why isn't fixed column working using Data-tabl

问题:

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>

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

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

回答1:

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 :-

1. Go to the datatables CDN page.
2. Find a section named Styling options and click on Bootstrap 4 button.
3. Replace your referenced datatables CSS with the bootstrap 4 one available in DataTables section.
4. 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.

After loading the correct stylesheets, the following CSS will also become unnecessary :-

.DTFC_LeftBodyLiner { overflow-x:hidden }

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.

回答2:

I have copied your code into a fiddle

View the fiddle here

You haven't said what it is supposed to look like but I've removed the css file

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

and it appears to be displaying as intended?

update: I have added the following style to fix the extra spaces that was appearing. It has also fixed the column scrolling issue.:

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

Check out the fiddle now.

回答3:

I added the below css to your code. widths should not be in pixels for datatable divisions.

#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>