Question

Я работаю с таблицами данных. У меня есть данные JSON, из которых я создаю таблицу HTML.

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

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 таблицы данных является хорошей идеей. Как вы все можете проверить Я исправляю 3 столбца моей таблицы, их выравнивание не идеально, что не очень удобно для пользователя

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

Можно ли добиться этого с помощью чистого CSS? Я много гуглил и нашел некоторые решения, но при смешивании их с моим CSS они не работают

Shubham Shah · Answer 1 · 08 мая 2019

В вашем HTML есть две проблемы.Вы пропустили загрузку таблицы стилей, требуемой расширением FixedColumns.И вы загрузили таблицу стилей для таблицы данных по умолчанию, которая не будет работать корректно со стилями начальной загрузки 4.

Чтобы устранить эту проблему: -

Перейдите на CDN для таблиц данных .стр.
Найдите раздел с именем Параметры стилей и нажмите кнопку Bootstrap 4 .
Замените CSS-файлы ссылочных данных на имеющийся загрузчик 4.в разделе DataTables .
Добавьте еще один CSS-файл в ваш HTML, который присутствует внутри Extensions -> FixedColumns section.

Вы можетеотметьте эту скрипку , где ваш код теперь работает как положено после применения исправлений.

После загрузки правильных таблиц стилей следующий CSS также станет ненужным: -

.DTFC_LeftBodyLiner { overflow-x:hidden }

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

DeclanMcD · Answer 2 · 29 апреля 2019

Я скопировал твой код в скрипку

Посмотреть скрипку здесь

Вы не сказали, как это должно выглядеть, но я удалил файл css

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

и, кажется, он отображается так, как задумано?

обновление: я добавил следующий стиль, чтобы исправить появившиеся лишние пробелы. Также исправлена проблема прокрутки столбца .:

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

Проверьте скрипку сейчас.

Ram_UI · Answer 3 · 02 мая 2019

Я добавил ниже 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>

Почему фиксированный столбец не работает с использованием таблицы данных?

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

Ответы [ 3 ]

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

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

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

Почему фиксированный столбец не работает с использованием таблицы данных?

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

Ответы [ 3 ]

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

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

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

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