如何设置HTML表格的动态高度和宽度？

时间：2019-04-26 10:55:02

标签： javascript jquery css3 html-table

我有一个带有JSON数据的HTML表，我正在使用数据表来修复表的标题和列，但是在修复这些表时，我必须设置一些宽度和高度

我想做的是

  • 如何根据屏幕尺寸设置动态宽度和高度
  • 我正在使用引导程序进行响应式设计，因此我希望打开的任何屏幕表都应采用该屏幕尺寸并根据该屏幕进行渲染
  • 在执行此操作
fixedColumns: {
    leftColumns: 2
}

前2列显示为滚动条，这也是错误的用户界面，例如this是否存在浏览器依赖性，因为在chrome上可以很好地呈现，但是在Mozilla上则看起来像我上传的图像 

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": 135116,
    "billdate": "2018-08-04",
    "counter": "South Indian-1-Flr",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 133350,
    "billdate": "2018-08-04",
    "counter": "South Indian-2-Flr",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 89092,
    "billdate": "2018-08-04",
    "counter": "Take-away counter 1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 61661,
    "billdate": "2018-08-04",
    "counter": "Coffee Counter",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 80568,
    "billdate": "2018-08-04",
    "counter": "Trade Pos1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 18425,
    "billdate": "2018-08-04",
    "counter": "Trade Pos 2",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 64091,
    "billdate": "2018-08-04",
    "counter": "Restaurant",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 16234,
    "billdate": "2018-08-04",
    "counter": "Coffee Counter",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 6233,
    "billdate": "2018-08-04",
    "counter": "Takeaway",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 18243,
    "billdate": "2018-08-04",
    "counter": "Trade POS",
    "outlet": "MALLESHWARAM"
  },

  {
    "amount": 69946,
    "billdate": "2018-09-02",
    "counter": "Restaurant",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 18197,
    "billdate": "2018-09-02",
    "counter": "Coffee Counter",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 8741,
    "billdate": "2018-09-02",
    "counter": "Takeaway",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 18820,
    "billdate": "2018-09-02",
    "counter": "Trade POS",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 78537,
    "billdate": "2018-09-02",
    "counter": "Restaurant",
    "outlet": "KOLAR"
  },
  {
    "amount": 5060,
    "billdate": "2018-09-02",
    "counter": "Trade POS",
    "outlet": "KOLAR"
  },
  {
    "amount": 49096,
    "billdate": "2018-09-03",
    "counter": "Take-away counter 1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58477,
    "billdate": "2018-09-03",
    "counter": "Coffee Counter",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 49933,
    "billdate": "2018-09-03",
    "counter": "Trade Pos1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 9915,
    "billdate": "2018-09-03",
    "counter": "Trade Pos 2",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 51209,
    "billdate": "2018-09-03",
    "counter": "Restaurant",
    "outlet": "KOLAR"
  },
  {
    "amount": 2566,
    "billdate": "2018-09-03",
    "counter": "Trade POS",
    "outlet": "KOLAR"
  },
  {
    "amount": 19602,
    "billdate": "2018-09-04",
    "counter": "North Indian",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 84490,
    "billdate": "2018-09-04",
    "counter": "South Indian-1-Flr",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 47952,
    "billdate": "2018-09-04",
    "counter": "Take-away counter 1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 56191,
    "billdate": "2018-09-04",
    "counter": "Coffee Counter",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 56829,
    "billdate": "2018-09-04",
    "counter": "Trade Pos1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 4648,
    "billdate": "2018-09-04",
    "counter": "Trade Pos 2",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 26051,
    "billdate": "2018-09-04",
    "counter": "Restaurant",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 14206,
    "billdate": "2018-09-04",
    "counter": "Coffee Counter",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 4322,
    "billdate": "2018-09-04",
    "counter": "Takeaway",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 14271,
    "billdate": "2018-09-04",
    "counter": "Trade POS",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 82248,
    "billdate": "2018-09-04",
    "counter": "Restaurant",
    "outlet": "KOLAR"
  },
  {
    "amount": 751,
    "billdate": "2018-09-04",
    "counter": "Trade POS",
    "outlet": "KOLAR"
  }
]

function formatData(data) {
  let toReturn = [];
  let dateWiseObj = {};
  let maxUniqueForOutlets = {};
  data.forEach(function(d) {
    if (!maxUniqueForOutlets[d["outlet"]]) {
      maxUniqueForOutlets[d["outlet"]] = [];
    }
    if (maxUniqueForOutlets[d["outlet"]].indexOf(d["counter"]) == -1) {
      maxUniqueForOutlets[d["outlet"]].push(d["counter"]);
    }

    if (!dateWiseObj[d["billdate"]]) {
      dateWiseObj[d["billdate"]] = {};
      dateWiseObj[d["billdate"]][d["outlet"]] = {};
      dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
    } else {
      if (!dateWiseObj[d["billdate"]][d["outlet"]]) {
        dateWiseObj[d["billdate"]][d["outlet"]] = {};
        dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
      } else {
        if (!dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]]) {
          dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
        }
      }
    }

  });

  return {
    dateWiseObj: dateWiseObj,
    maxUniqueForOutlets: maxUniqueForOutlets
  };
};


function addTable(dataObj) {
  let dateWiseObj = dataObj.dateWiseObj;
  let maxUniqueForOutlets = dataObj.maxUniqueForOutlets;
  let table = document.createElement("table");
  let thead = document.createElement("thead");
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");
  th.innerHTML = "Outlet";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  th = document.createElement("th");
  th.innerHTML = "Totals";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  Object.keys(maxUniqueForOutlets).forEach(function(d) {
    th = document.createElement("th");
    th.innerHTML = d; // ol names
    th.classList.add("text-center");
    th.colSpan = maxUniqueForOutlets[d].length + 1;
    headerRow.appendChild(th);

  });
  thead.appendChild(headerRow);
  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "BillDate";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  th = document.createElement("th");
  th.innerHTML = "Counter";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  Object.keys(maxUniqueForOutlets).forEach(function(k) {
    th = document.createElement("th");
    th.innerHTML = "Total";
    th.classList.add("text-center");
    headerRow.appendChild(th);
    maxUniqueForOutlets[k].forEach(function(d) {
      th = document.createElement("th");
      th.innerHTML = d; //counters name
      th.classList.add("text-center");
      headerRow.appendChild(th);
    });
  });
  thead.appendChild(headerRow);
  table.appendChild(thead);
  let tbody = document.createElement("tbody");
  headerRow = document.createElement("tr");
  let completeTotal = 0;
  let outletandCounterWiseCompleteTotal = {};
  Object.keys(dateWiseObj).forEach(function(k) {
    let row = document.createElement("tr");

    let td = document.createElement("td");
    td.innerHTML = k; //billdate

    row.appendChild(td);


    grandTotal = 0;
    outletWiseTotal = {};
    Object.keys(maxUniqueForOutlets).map(function(d) {
      if (!outletandCounterWiseCompleteTotal[d])
        outletandCounterWiseCompleteTotal[d] = {};
      outletWiseTotal[d] = 0;
      if (dateWiseObj[k][d]) {
        Object.keys(dateWiseObj[k][d]).forEach(function(i) {
          if (outletandCounterWiseCompleteTotal[d][i]) {
            outletandCounterWiseCompleteTotal[d][i] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
          } else {
            outletandCounterWiseCompleteTotal[d][i] = parseInt(dateWiseObj[k][d][i]["amount"] || "0");
          }
          outletWiseTotal[d] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
        });
      }
      if (outletandCounterWiseCompleteTotal[d]["total"])
        outletandCounterWiseCompleteTotal[d]["total"] += outletWiseTotal[d];
      else
        outletandCounterWiseCompleteTotal[d]["total"] = outletWiseTotal[d];
      grandTotal += outletWiseTotal[d];
    });
    td = document.createElement("td");
    td.innerHTML = grandTotal.toLocaleString('en-IN');
    td.classList.add("text-right"); //grandTotal full column
    row.appendChild(td);

    Object.keys(maxUniqueForOutlets).map(function(d) {
      td = document.createElement("td");
      td.innerHTML = outletWiseTotal[d].toLocaleString('en-IN');
      td.classList.add("text-right"); //outlet total
      row.appendChild(td);
      if (dateWiseObj[k][d]) {
        maxUniqueForOutlets[d].forEach(function(i) {
          td = document.createElement("td");
          td.innerHTML = dateWiseObj[k][d][i] ? dateWiseObj[k][d][i]["amount"].toLocaleString('en-IN') : "0";
          td.classList.add("text-right"); //all total
          row.appendChild(td);
        });
      } else {
        maxUniqueForOutlets[d].forEach(function(i) {
          td = document.createElement("td");
          td.innerHTML = "0";
          td.classList.add("text-right");
          row.appendChild(td);
        });
      }
    });
    tbody.appendChild(row);
    completeTotal += grandTotal;
    //console.log(outletWiseTotal);
  });

  th = document.createElement("th");
  th.innerHTML = "Total";
  headerRow.appendChild(th);
  th = document.createElement("th");
  th.innerHTML = completeTotal.toLocaleString('en-IN');
  th.classList.add("text-right"); //complete total of all
  headerRow.appendChild(th);

  Object.keys(maxUniqueForOutlets).forEach(function(d) {
    if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d]["total"]) {
      th = document.createElement("th");
      th.innerHTML = outletandCounterWiseCompleteTotal[d]["total"].toLocaleString('en-IN');
      th.classList.add("text-right");
      headerRow.appendChild(th);
    } else {
      th = document.createElement("th");
      th.innerHTML = 0;
      headerRow.appendChild(th);
    }
    maxUniqueForOutlets[d].forEach(function(i) {
      if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d][i]) {
        th = document.createElement("th");
        th.innerHTML = outletandCounterWiseCompleteTotal[d][i].toLocaleString('en-IN');
        th.classList.add("text-right");
        headerRow.appendChild(th);
      } else {
        th = document.createElement("th");
        th.innerHTML = 0;
        headerRow.appendChild(th);
      }
    });
  });

  thead.appendChild(headerRow);
  table.appendChild(tbody);
  let divContainer = document.getElementById("tblOlcounterWise");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
  $(table).DataTable({ //adding datatabl functionality 
    "scrollX": true,
    "scrollY": "200px",
    "scrollCollapse": true,
    "paging": false,
    "info": false,
    "ordering": false,
    "searching": false,
    fixedColumns: {
      leftColumns: 2
    }
  });
}

var dataObj = formatData(data);
addTable(dataObj);
div.dataTables_wrapper {
  width: 500px;
  /*how to make this dynamic*/
  margin: 0 auto;
}

table {
  border-collapse: collapse;
}

table.table-bordered>thead>tr>th {
  border: 1px solid white;
  white-space: nowrap;
  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;
  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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 align="center" class="table table-responsive">
  <table id="tblOlcounterWise"></table>
</div>

我的代码看起来很大，但实际上，不是在我的javascript代码中注释了添加数据表功能的那一行

修改

当行数增加表未正确垂直滚动时，固定列将固定，它们不会与所有元素垂直滚动

[{"amount":49644,"billdate":"2018-09-01","counter":"North Indian","outlet":"JAYANAGAR"},{"amount":194495,"billdate":"2018-09-01","counter":"South Indian-1-Flr","outlet":"JAYANAGAR"},{"amount":80768,"billdate":"2018-09-01","counter":"Take-away counter 1","outlet":"JAYANAGAR"},{"amount":60878,"billdate":"2018-09-01","counter":"Coffee Counter","outlet":"JAYANAGAR"},{"amount":81999,"billdate":"2018-09-01","counter":"Trade Pos1","outlet":"JAYANAGAR"},{"amount":8642,"billdate":"2018-09-01","counter":"Trade Pos 2","outlet":"JAYANAGAR"},{"amount":53822,"billdate":"2018-09-01","counter":"Restaurant","outlet":"MALLESHWARAM"},{"amount":15339,"billdate":"2018-09-01","counter":"Coffee Counter","outlet":"MALLESHWARAM"},{"amount":7548,"billdate":"2018-09-01","counter":"Takeaway","outlet":"MALLESHWARAM"},{"amount":15432,"billdate":"2018-09-01","counter":"Trade POS","outlet":"MALLESHWARAM"},{"amount":107602,"billdate":"2018-09-01","counter":"Restaurant","outlet":"KOLAR"},{"amount":7711,"billdate":"2018-09-01","counter":"Trade POS","outlet":"KOLAR"},{"amount":39,"billdate":"2018-09-02","counter":"North Indian","outlet":"JAYANAGAR"},{"amount":118647,"billdate":"2018-09-02","counter":"South Indian-1-Flr","outlet":"JAYANAGAR"},{"amount":119871,"billdate":"2018-09-02","counter":"South Indian-2-Flr","outlet":"JAYANAGAR"},{"amount":109527,"billdate":"2018-09-02","counter":"Take-away counter 1","outlet":"JAYANAGAR"},{"amount":64771,"billdate":"2018-09-02","counter":"Coffee Counter","outlet":"JAYANAGAR"},{"amount":78037,"billdate":"2018-09-02","counter":"Trade Pos1","outlet":"JAYANAGAR"},{"amount":20261,"billdate":"2018-09-02","counter":"Trade Pos 2","outlet":"JAYANAGAR"},{"amount":69946,"billdate":"2018-09-02","counter":"Restaurant","outlet":"MALLESHWARAM"},{"amount":18197,"billdate":"2018-09-02","counter":"Coffee Counter","outlet":"MALLESHWARAM"},{"amount":8741,"billdate":"2018-09-02","counter":"Takeaway","outlet":"MALLESHWARAM"},{"amount":18820,"billdate":"2018-09-02","counter":"Trade POS","outlet":"MALLESHWARAM"},{"amount":78537,"billdate":"2018-09-02","counter":"Restaurant","outlet":"KOLAR"},{"amount":5060,"billdate":"2018-09-02","counter":"Trade POS","outlet":"KOLAR"},{"amount":49096,"billdate":"2018-09-03","counter":"Take-away counter 1","outlet":"JAYANAGAR"},{"amount":58477,"billdate":"2018-09-03","counter":"Coffee Counter","outlet":"JAYANAGAR"},{"amount":49933,"billdate":"2018-09-03","counter":"Trade Pos1","outlet":"JAYANAGAR"},{"amount":9915,"billdate":"2018-09-03","counter":"Trade Pos 2","outlet":"JAYANAGAR"},{"amount":51209,"billdate":"2018-09-03","counter":"Restaurant","outlet":"KOLAR"},{"amount":2566,"billdate":"2018-09-03","counter":"Trade POS","outlet":"KOLAR"},{"amount":19602,"billdate":"2018-09-04","counter":"North Indian","outlet":"JAYANAGAR"},{"amount":84490,"billdate":"2018-09-04","counter":"South Indian-1-Flr","outlet":"JAYANAGAR"},{"amount":47952,"billdate":"2018-09-04","counter":"Take-away counter 1","outlet":"JAYANAGAR"},{"amount":56191,"billdate":"2018-09-04","counter":"Coffee Counter","outlet":"JAYANAGAR"},{"amount":56829,"billdate":"2018-09-04","counter":"Trade Pos1","outlet":"JAYANAGAR"},{"amount":4648,"billdate":"2018-09-04","counter":"Trade Pos 2","outlet":"JAYANAGAR"},{"amount":26051,"billdate":"2018-09-04","counter":"Restaurant","outlet":"MALLESHWARAM"},{"amount":14206,"billdate":"2018-09-04","counter":"Coffee Counter","outlet":"MALLESHWARAM"},{"amount":4322,"billdate":"2018-09-04","counter":"Takeaway","outlet":"MALLESHWARAM"},{"amount":14271,"billdate":"2018-09-04","counter":"Trade POS","outlet":"MALLESHWARAM"},{"amount":82248,"billdate":"2018-09-04","counter":"Restaurant","outlet":"KOLAR"},{"amount":751,"billdate":"2018-09-04","counter":"Trade POS","outlet":"KOLAR"},{"amount":31224,"billdate":"2018-09-05","counter":"North Indian","outlet":"JAYANAGAR"},{"amount":135675,"billdate":"2018-09-05","counter":"South Indian-1-Flr","outlet":"JAYANAGAR"},{"amount":50704,"billdate":"2018-09-05","counter":"Take-away counter 1","outlet":"JAYANAGAR"},{"amount":55118,"billdate":"2018-09-05","counter":"Coffee Counter","outlet":"JAYANAGAR"},{"amount":49738,"billdate":"2018-09-05","counter":"Trade Pos1","outlet":"JAYANAGAR"},{"amount":13374,"billdate":"2018-09-05","counter":"Trade Pos 2","outlet":"JAYANAGAR"},{"amount":31923,"billdate":"2018-09-05","counter":"Restaurant","outlet":"MALLESHWARAM"},{"amount":14532,"billdate":"2018-09-05","counter":"Coffee Counter","outlet":"MALLESHWARAM"},{"amount":2792,"billdate":"2018-09-05","counter":"Takeaway","outlet":"MALLESHWARAM"},{"amount":16930,"billdate":"2018-09-05","counter":"Trade POS","outlet":"MALLESHWARAM"},{"amount":81019,"billdate":"2018-09-05","counter":"Restaurant","outlet":"KOLAR"},{"amount":4377,"billdate":"2018-09-05","counter":"Trade POS","outlet":"KOLAR"}]

1 个答案:

答案 0 :(得分：1)

您的第一个错误Vivek使用Bootstrap进行响应。

您的第二种想法是，响应式是某种魔术，例如FixedColumns这样的插件可以解决任何情况。

响应式是设计上的问题，因此必须解决甚至决定要在项目中使用哪种技术。应该对每种设备格式的数据表的外观进行设计。

但是，我将告诉您如何修复Firefox错误。您只需要将此代码添加到CSS：

.DTFC_LeftBodyLiner {
  overflow-y: initial!important;
  width: auto!important;
}

更新：在聊天中我们进行了交谈之后，我了解到您在滚动时遇到的其他问题。解决方案是删除引导响应表的组合：

<div align="center" class="table table-responsive">

，然后将div.dataTables_wrapper的宽度修改为100％，并添加以下CSS：

.table.DTFC_Cloned {
  background-color: #fff;
}

还用<table>标签更改了#tblOlcounterWise <div>标签，因为将<div>标签直接嵌入<table>内时会出现语法错误。

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": 135116,
    "billdate": "2018-08-04",
    "counter": "South Indian-1-Flr",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 133350,
    "billdate": "2018-08-04",
    "counter": "South Indian-2-Flr",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 89092,
    "billdate": "2018-08-04",
    "counter": "Take-away counter 1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 61661,
    "billdate": "2018-08-04",
    "counter": "Coffee Counter",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 80568,
    "billdate": "2018-08-04",
    "counter": "Trade Pos1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 18425,
    "billdate": "2018-08-04",
    "counter": "Trade Pos 2",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 64091,
    "billdate": "2018-08-04",
    "counter": "Restaurant",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 16234,
    "billdate": "2018-08-04",
    "counter": "Coffee Counter",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 6233,
    "billdate": "2018-08-04",
    "counter": "Takeaway",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 18243,
    "billdate": "2018-08-04",
    "counter": "Trade POS",
    "outlet": "MALLESHWARAM"
  },

  {
    "amount": 69946,
    "billdate": "2018-09-02",
    "counter": "Restaurant",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 18197,
    "billdate": "2018-09-02",
    "counter": "Coffee Counter",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 8741,
    "billdate": "2018-09-02",
    "counter": "Takeaway",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 18820,
    "billdate": "2018-09-02",
    "counter": "Trade POS",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 78537,
    "billdate": "2018-09-02",
    "counter": "Restaurant",
    "outlet": "KOLAR"
  },
  {
    "amount": 5060,
    "billdate": "2018-09-02",
    "counter": "Trade POS",
    "outlet": "KOLAR"
  },
  {
    "amount": 49096,
    "billdate": "2018-09-03",
    "counter": "Take-away counter 1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58477,
    "billdate": "2018-09-03",
    "counter": "Coffee Counter",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 49933,
    "billdate": "2018-09-03",
    "counter": "Trade Pos1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 9915,
    "billdate": "2018-09-03",
    "counter": "Trade Pos 2",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 51209,
    "billdate": "2018-09-03",
    "counter": "Restaurant",
    "outlet": "KOLAR"
  },
  {
    "amount": 2566,
    "billdate": "2018-09-03",
    "counter": "Trade POS",
    "outlet": "KOLAR"
  },
  {
    "amount": 19602,
    "billdate": "2018-09-04",
    "counter": "North Indian",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 84490,
    "billdate": "2018-09-04",
    "counter": "South Indian-1-Flr",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 47952,
    "billdate": "2018-09-04",
    "counter": "Take-away counter 1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 56191,
    "billdate": "2018-09-04",
    "counter": "Coffee Counter",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 56829,
    "billdate": "2018-09-04",
    "counter": "Trade Pos1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 4648,
    "billdate": "2018-09-04",
    "counter": "Trade Pos 2",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 26051,
    "billdate": "2018-09-04",
    "counter": "Restaurant",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 14206,
    "billdate": "2018-09-04",
    "counter": "Coffee Counter",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 4322,
    "billdate": "2018-09-04",
    "counter": "Takeaway",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 14271,
    "billdate": "2018-09-04",
    "counter": "Trade POS",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 82248,
    "billdate": "2018-09-04",
    "counter": "Restaurant",
    "outlet": "KOLAR"
  },
  {
    "amount": 751,
    "billdate": "2018-09-04",
    "counter": "Trade POS",
    "outlet": "KOLAR"
  }
]

function formatData(data) {
  let toReturn = [];
  let dateWiseObj = {};
  let maxUniqueForOutlets = {};
  data.forEach(function(d) {
    if (!maxUniqueForOutlets[d["outlet"]]) {
      maxUniqueForOutlets[d["outlet"]] = [];
    }
    if (maxUniqueForOutlets[d["outlet"]].indexOf(d["counter"]) == -1) {
      maxUniqueForOutlets[d["outlet"]].push(d["counter"]);
    }

    if (!dateWiseObj[d["billdate"]]) {
      dateWiseObj[d["billdate"]] = {};
      dateWiseObj[d["billdate"]][d["outlet"]] = {};
      dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
    } else {
      if (!dateWiseObj[d["billdate"]][d["outlet"]]) {
        dateWiseObj[d["billdate"]][d["outlet"]] = {};
        dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
      } else {
        if (!dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]]) {
          dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
        }
      }
    }

  });

  return {
    dateWiseObj: dateWiseObj,
    maxUniqueForOutlets: maxUniqueForOutlets
  };
};


function addTable(dataObj) {
  let dateWiseObj = dataObj.dateWiseObj;
  let maxUniqueForOutlets = dataObj.maxUniqueForOutlets;
  let table = document.createElement("table");
  let thead = document.createElement("thead");
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");
  th.innerHTML = "Outlet";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  th = document.createElement("th");
  th.innerHTML = "Totals";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  Object.keys(maxUniqueForOutlets).forEach(function(d) {
    th = document.createElement("th");
    th.innerHTML = d; // ol names
    th.classList.add("text-center");
    th.colSpan = maxUniqueForOutlets[d].length + 1;
    headerRow.appendChild(th);

  });
  thead.appendChild(headerRow);
  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "BillDate";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  th = document.createElement("th");
  th.innerHTML = "Counter";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  Object.keys(maxUniqueForOutlets).forEach(function(k) {
    th = document.createElement("th");
    th.innerHTML = "Total";
    th.classList.add("text-center");
    headerRow.appendChild(th);
    maxUniqueForOutlets[k].forEach(function(d) {
      th = document.createElement("th");
      th.innerHTML = d; //counters name
      th.classList.add("text-center");
      headerRow.appendChild(th);
    });
  });
  thead.appendChild(headerRow);
  table.appendChild(thead);
  let tbody = document.createElement("tbody");
  headerRow = document.createElement("tr");
  let completeTotal = 0;
  let outletandCounterWiseCompleteTotal = {};
  Object.keys(dateWiseObj).forEach(function(k) {
    let row = document.createElement("tr");

    let td = document.createElement("td");
    td.innerHTML = k; //billdate

    row.appendChild(td);


    grandTotal = 0;
    outletWiseTotal = {};
    Object.keys(maxUniqueForOutlets).map(function(d) {
      if (!outletandCounterWiseCompleteTotal[d])
        outletandCounterWiseCompleteTotal[d] = {};
      outletWiseTotal[d] = 0;
      if (dateWiseObj[k][d]) {
        Object.keys(dateWiseObj[k][d]).forEach(function(i) {
          if (outletandCounterWiseCompleteTotal[d][i]) {
            outletandCounterWiseCompleteTotal[d][i] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
          } else {
            outletandCounterWiseCompleteTotal[d][i] = parseInt(dateWiseObj[k][d][i]["amount"] || "0");
          }
          outletWiseTotal[d] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
        });
      }
      if (outletandCounterWiseCompleteTotal[d]["total"])
        outletandCounterWiseCompleteTotal[d]["total"] += outletWiseTotal[d];
      else
        outletandCounterWiseCompleteTotal[d]["total"] = outletWiseTotal[d];
      grandTotal += outletWiseTotal[d];
    });
    td = document.createElement("td");
    td.innerHTML = grandTotal.toLocaleString('en-IN');
    td.classList.add("text-right"); //grandTotal full column
    row.appendChild(td);

    Object.keys(maxUniqueForOutlets).map(function(d) {
      td = document.createElement("td");
      td.innerHTML = outletWiseTotal[d].toLocaleString('en-IN');
      td.classList.add("text-right"); //outlet total
      row.appendChild(td);
      if (dateWiseObj[k][d]) {
        maxUniqueForOutlets[d].forEach(function(i) {
          td = document.createElement("td");
          td.innerHTML = dateWiseObj[k][d][i] ? dateWiseObj[k][d][i]["amount"].toLocaleString('en-IN') : "0";
          td.classList.add("text-right"); //all total
          row.appendChild(td);
        });
      } else {
        maxUniqueForOutlets[d].forEach(function(i) {
          td = document.createElement("td");
          td.innerHTML = "0";
          td.classList.add("text-right");
          row.appendChild(td);
        });
      }
    });
    tbody.appendChild(row);
    completeTotal += grandTotal;
    //console.log(outletWiseTotal);
  });

  th = document.createElement("th");
  th.innerHTML = "Total";
  headerRow.appendChild(th);
  th = document.createElement("th");
  th.innerHTML = completeTotal.toLocaleString('en-IN');
  th.classList.add("text-right"); //complete total of all
  headerRow.appendChild(th);

  Object.keys(maxUniqueForOutlets).forEach(function(d) {
    if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d]["total"]) {
      th = document.createElement("th");
      th.innerHTML = outletandCounterWiseCompleteTotal[d]["total"].toLocaleString('en-IN');
      th.classList.add("text-right");
      headerRow.appendChild(th);
    } else {
      th = document.createElement("th");
      th.innerHTML = 0;
      headerRow.appendChild(th);
    }
    maxUniqueForOutlets[d].forEach(function(i) {
      if (outletandCounterWiseCompleteTotal[d] && outletandCounterWiseCompleteTotal[d][i]) {
        th = document.createElement("th");
        th.innerHTML = outletandCounterWiseCompleteTotal[d][i].toLocaleString('en-IN');
        th.classList.add("text-right");
        headerRow.appendChild(th);
      } else {
        th = document.createElement("th");
        th.innerHTML = 0;
        headerRow.appendChild(th);
      }
    });
  });

  thead.appendChild(headerRow);
  table.appendChild(tbody);
  let divContainer = document.getElementById("tblOlcounterWise");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
  var $winHeight = $(document).height();
  var $bodyHeight = $winHeight - 90;
  $(table).DataTable({ //adding datatabl functionality 
    "scrollX": true,
    "scrollY": $bodyHeight + "px",
    "scrollCollapse": true,
    "paging": false,
    "info": false,
    "ordering": false,
    "searching": false,
    fixedColumns: {
      leftColumns: 2
    }
  });
}

var dataObj = formatData(data);
addTable(dataObj);
div.dataTables_wrapper {
  width: 100%;
  /*how to make this dynamic*/
  margin: 0 auto;
}

table {
  border-collapse: collapse;
}

table.table-bordered>thead>tr>th {
  border: 1px solid white;
  white-space: nowrap;
  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;
  font-family: Verdana;
  font-size: 8pt;
  background-color: rgba(84, 83, 72, .1);
  padding: 5px 5px 5px 5px;
  color: black;
}
.DTFC_LeftBodyLiner {
  overflow-y: initial!important;
  width: auto!important;
}
.table.DTFC_Cloned {
background-color: #fff;
}
<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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 align="center" class="table table-responsive"-->
  <div id="tblOlcounterWise"></div>
<!--/div-->

相关问题
最新问题