javascript - 如何在 Datatable 中用两列显示多个结果？

Question

在下面的代码中，它将仅返回 Date.How to show this on HTml table with two columns?? 我需要根据结果创建频率列..频率列的每一行都是第一个基本处理..

我想在一个 Html 表中显示两列，如 预期输出

**Date**         **Frequency**
19-Jan-2019     1st Basic treatment
05-Feb-2019     2nd Control Treatment
----------
----------
17-Dec-2019     12th Control treatment

    Date.prototype.addDays = function(days) {
var date = new Date(this.valueOf());
date.setDate(date.getDate() + days);
return date; }


function formatDate(date) {
  var monthNames = [
    "Jan", "Feb", "Mar",
    "Apr", "May", "June", "July",
    "Aug", "Sept", "Oct",
    "Nov", "Dec"
  ];

  var day = date.getDate();
  var monthIndex = date.getMonth();
  var year = date.getFullYear();

  return day + '-' + monthNames[monthIndex] + '-' + year;
}


function printNextPeriod(startDate, endDate, periodInDays) {
var numWorkDays = 0;
var currentDate = new Date(startDate);
while (numWorkDays < periodInDays && currentDate <= endDate) {
    currentDate = currentDate.addDays(1);
    // Skips friday
    if (currentDate.getDay() !== 5) {
        numWorkDays++;
    }
    if (numWorkDays == periodInDays) {
        numWorkDays = 0;
        //console.log(currentDate);
        console.log(formatDate(currentDate));
    }
} }
var start = new Date("2019-01-01");
var end = new Date("2019-12-31");
var period = 15;
printNextPeriod(start, end, period);

标签： javascriptjqueryhtmldatatablebootstrap-4

Answer 1

更改问题后，解决方案可能是这样

如果您真的想要一个表格，请将 div 更改为表格单元格

您可以使用 document.createElement 和 tbody.appendChild

function nth(d)  { if (d > 3 && d < 21) return 'th';  switch (d % 10) { case 1:  return "st"; case 2:  return "nd"; case 3:  return "rd"; default: return "th"; } }
function dateToYMD(date) { var strArray=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; var d = date.getDate(); var m = strArray[date.getMonth()]; var y = date.getFullYear(); return '' + (d <= 9 ? '0' + d : d) + '-' + m + '-' + y; }
Date.prototype.addDays = function(days) { var date = new Date(this.valueOf()); date.setDate(date.getDate() + days); return date; }
function pad(str) { return (" "+str).slice(-2) }
var cnt = 0, dataSet = [];

function printNextPeriod(startDate, endDate, periodInDays) {
  var numWorkDays = 0;
  var currentDate = new Date(startDate);
  while (numWorkDays < periodInDays && currentDate <= endDate) {
    currentDate = currentDate.addDays(1);
    // Skips friday
    if (currentDate.getDay() !== 5) {
      numWorkDays++;
    }
    if (numWorkDays == periodInDays) {
      numWorkDays = 0;
      cnt++; 
      let treatment = pad(cnt) + nth(cnt) + (cnt == 1 ? " Basic" : " Control") + " Treatment"
      dataSet.push([dateToYMD(currentDate),treatment]);
    }
  }
}

var start = new Date("2019-01-01");
var end = new Date("2019-12-31");
var period = 15;
printNextPeriod(start, end, period);

$(document).ready(function() {
  $('#example').DataTable({
    data: dataSet,
    columns: [{ title: "Date" },
              { title: "Frequency" }
    ],
    order: [ [1, "asc"] ],
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="example">
  </div>