Datatable: как перейти к первой пустой ячейке - PullRequest
Новая
       0

Datatable: как перейти к первой пустой ячейке

0 голосов
/ 15 февраля 2019

Я использую datatable для отображения прогнозов о будущих событиях.Среди моих рубрик есть «День», «Час», «Прогноз», «Реальность».

Предсказание всегда заполняется, но реальность заполняется только тогда, когда происходит событие.

Я хочу перейти на страницу, соответствующую текущему времени.Поэтому я использовал jumpToData () на дату.При этом у меня есть быстрый доступ к последним событиям текущего дня, но мне все еще нужно перевернуть 4 или 5 страниц, если это, например, 9 утра.

Я думаю, что самый простой способ решить эту проблему - перейти к первой пустой ячейке в столбце «Реальность».

Есть ли у вас какие-либо элементы для этого?

Заранее благодарен за любую помощь, Томас

1 Ответ

0 голосов
/ 15 февраля 2019

Это то, что вы пытались достичь?: 

//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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...