【问题标题】:How to show the multiple results in Datatable with two columns?如何在 Datatable 中用两列显示多个结果?
【发布时间】:2019-12-26 12:52:59
【问题描述】:

在下面的代码中,它将只返回日期。如何在具有两列的 HTml 表上显示这个? 我需要根据结果创建频率列.. 频率列的每一行都是第一次基本处理..

我想在包含两列的 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);

【问题讨论】:

  • 查看日期对象的不同 getter 方法:developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - 你会发现 getFullYear()、getDate() 和 getMonth() 可以用来输出你的日期想要。
  • 'Sat Jan 19 2019 04:00:00 GMT+0400'.replace(/^.{4}|GMT/g,'') 为我完成了这项工作。 ;-)
  • 来自骗子: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 &lt;= 9 ? '0' + d : d) + '-' + m + '-' + y; }
  • @mplungjan 如何显示这个 Html 表格??像两列?
  • @mplungjan 在每次第一次治疗时,我需要显示第一次基本治疗和其他第二次控制治疗,第三次控制治疗等等......

标签: javascript jquery html datatable bootstrap-4


【解决方案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>

【讨论】:

猜你喜欢
  • 2018-07-28
  • 2014-02-16
  • 1970-01-01
  • 1970-01-01
  • 2021-06-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多