Question

我正在使用数据表来显示有关未来事件的预测。在我的专栏中，我有“白天”，“小时”，“预测”，“现实”。

总是会填充预测，但只有在事件发生时才填充现实。

我想跳到当前时间对应的页面。所以我在日期上使用了jumpToData（）。这样一来，我可以快速访问当天的最后事件，但是如果是上午9点，我仍然需要翻4或5页。

我认为解决问题的最简单方法是跳转到“现实”列中的第一个空白单元格。

您有任何要做的事情吗？

在此先感谢您的帮助，托马斯

Answer 1

这是您想要实现的目标吗？：

//Make up random chronological data to fill DataTable
var srcData = [...Array(300)].map((value, index) => {
  let obj = {};
  let today = new Date()
  let randomDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()-10, index);
  obj.date = randomDate.toLocaleDateString();
  obj.hour = index%24;
  obj.prediction = Math.floor(Math.random()*1000);
  obj.reality = randomDate < Date.now() ? obj.prediction+(3-Math.floor(Math.random()*6)) : '';
  return obj;
});
//Define DataTables object
var dataTable = $('#forecasts').DataTable({
  sDom: 'tp',
  orderFixed: [[0, 'asc'],[1, 'asc']],
  ordering: false,
  data: srcData,
  columns: [
    {title: 'date', data: 'date'},
    {title: 'hour', data: 'hour'},
    {title: 'prediction', data: 'prediction'},
    {title: 'reality', data: 'reality'},
  ]
});
$('#jumptoblank').on('click', () => {
  //Search for empty cell
  var emptyRowIndex = dataTable.rows().data().toArray().findIndex(row => row.reality == '');
  //Go to the page, where necessary row is located
  dataTable.page(Math.floor(emptyRowIndex/dataTable.page.info().length)).draw(false)
});

.dataTables_wrapper {width: 600px}

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  </head>
  <body>
    <button id="jumptoblank">Jump to blank reality</button>
    <table id="forecasts"></table>
  </body>
</html>

数据表：如何跳转到第一个空单元格

1 个答案: