Вы можете прослушивать событие 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>