Question

У меня есть HTML-таблица с данными JSON, я использую таблицы данных для исправления заголовка и столбцов своей таблицы, но при их исправлении я должен установить некоторую ширину и высоту

Что я пытаюсь сделатьdo is

Как настроить динамическую ширину и высоту в соответствии с размером экрана
Я использую загрузчик для адаптивного дизайна, поэтому я хочу, чтобы какая бы таблица таблиц не открывалась, она должна принимать этот размер экрана ирендеринг в соответствии с этим
При этом

fixedColumns: {
    leftColumns: 2
}

первые 2 столбца также отображаются в виде прокрутки, что является плохим пользовательским интерфейсом, например есть какая-то зависимость от браузера, потому что на 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"}]

Daniel Abril · Answer 1 · 26 апреля 2019

Ваша первая ошибка 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;
}

также изменяет тег #tblOlcounterWise <table> на тег <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-->

Как установить динамическую высоту и ширину для таблицы HTML?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Как установить динамическую высоту и ширину для таблицы HTML?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Нет похожих вопросов