Ограничить количество данных в таблице - PullRequest
0 голосов
/ 20 февраля 2019

Я связал свои таблицы данных с веб-сокетом для отображения текущих данных из бэкэнда.Данные в режиме реального времени, поэтому строка добавляется непрерывно.

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

1 Ответ

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

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

Это может сработать, я думаю:

//define initial data sample
const srcData = [{parameter: 'CPU usage, %', value: Math.floor(Math.random()*100), timestamp: (new Date()).toString()}];
//define datatable object
const dataTable = $('#mytable').DataTable({
  sDom: 't',
  data: srcData,
  columns: [
    {title: 'parameter', data: 'parameter'},
    {title: 'value', data: 'value'},
    {title: 'timestamp', data: 'timestamp'}
  ]
});
//emulate new data insertion
const dataPooler = window.setInterval(function(){
	dataTable.row.add({parameter: 'CPU usage, %', value: Math.floor(Math.random()*100), timestamp: (new Date()).toString()}).draw();
},3000);
//listen for new draws, purge oldest entry
dataTable.on('preDraw', function(){
	if(dataTable.rows().count() < 5) return;
  //grab the oldest entry timestamp
	let oldestTimestamp = dataTable.column(2).data().toArray().map(entry => new Date(entry)).sort()[0].toString();
	//look through the table and purge corresponding entry if table has more than 10 entries
	let oldestEntryIndex = dataTable.column(2).data().indexOf(oldestTimestamp)
	dataTable.row(oldestEntryIndex).remove();
});
<!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>
    <table id="mytable"></table>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...